<!DOCTYPE html>
<html lang="en">

<head>
    <title>Datta Able - Material icon</title>
    <!-- HTML5 Shim and Respond.js IE10 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 10]>
		<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
		<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
		<![endif]-->
    <!-- Meta -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="description" content="Datta Able Bootstrap admin template made using Bootstrap 4 and it has huge amount of ready made feature, UI components, pages which completely fulfills any dashboard needs." />
    <meta name="keywords" content="admin templates, bootstrap admin templates, bootstrap 4, dashboard, dashboard templets, sass admin templets, html admin templates, responsive, bootstrap admin templates free download,premium bootstrap admin templates, datta able, datta able bootstrap admin template">
    <meta name="author" content="Codedthemes" />

    <!-- Favicon icon -->
    <link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">
    <!-- fontawesome icon -->
    <link rel="stylesheet" href="assets/fonts/fontawesome/css/fontawesome-all.min.css">
    <!-- animation css -->
    <link rel="stylesheet" href="assets/plugins/animation/css/animate.min.css">
    <!-- vendor css -->
    <link rel="stylesheet" href="assets/css/style.css">
    <!-- material icon -->
    <link rel="stylesheet" href="assets/fonts/material/css/materialdesignicons.min.css">

</head>

<body>
    <!-- [ Pre-loader ] start -->
    <div class="loader-bg">
        <div class="loader-track">
            <div class="loader-fill"></div>
        </div>
    </div>
    <!-- [ Pre-loader ] End -->

    <!-- [ navigation menu ] start -->
    <nav class="pcoded-navbar">
        <div class="navbar-wrapper">
            <div class="navbar-brand header-logo">
                <a href="index.html" class="b-brand">
                    <div class="b-bg">
                        <i class="feather icon-trending-up"></i>
                    </div>
                    <span class="b-title">Datta Able</span>
                </a>
                <a class="mobile-menu" id="mobile-collapse" href="#!"><span></span></a>
            </div>
            <div class="navbar-content scroll-div">
                <ul class="nav pcoded-inner-navbar">
                    <li class="nav-item pcoded-menu-caption">
                        <label>Navigation</label>
                    </li>
                    <li data-username="dashboard Default Ecommerce CRM Analytics Crypto Project" class="nav-item pcoded-hasmenu">
                        <a href="#!" class="nav-link"><span class="pcoded-micon"><i class="feather icon-home"></i></span><span class="pcoded-mtext">Dashboard</span></a>
                        <ul class="pcoded-submenu">
                            <li class=""><a href="index.html" class="">Default</a></li>
                            <li class=""><a href="dashboard-ecommerce.html" class="">Ecommerce</a></li>
                            <li class=""><a href="dashboard-crm.html" class="">CRM</a></li>
                            <li class=""><a href="dashboard-analytics.html" class="">Analytics</a></li>
                            <li class=""><a href="dashboard-crypto.html" class="">Crypto<span class="pcoded-badge label label-danger">NEW</span></a></li>
                            <li class=""><a href="dashboard-project.html" class="">Project</a></li>
                        </ul>
                    </li>
                    <li data-username="Vertical Horizontal Box Layout RTL fixed static collapse menu color icon dark" class="nav-item pcoded-hasmenu">
                        <a href="#!" class="nav-link"><span class="pcoded-micon"><i class="feather icon-layout"></i></span><span class="pcoded-mtext">Page layouts</span></a>
                        <ul class="pcoded-submenu">
                            <li class="pcoded-hasmenu"><a href="#!" class="">Vertical</a>
                                <ul class="pcoded-submenu">
                                    <li class=""><a href="layout-static.html" class="" target="_blank">Static</a></li>
                                    <li class=""><a href="layout-fixed.html" class="" target="_blank">Fixed</a></li>
                                    <li class=""><a href="layout-menu-fixed.html" class="" target="_blank">Navbar fixed</a></li>
                                    <li class=""><a href="layout-mini-menu.html" class="" target="_blank">Collapse menu</a></li>
                                </ul>
                            </li>
                            <li class=""><a href="layout-horizontal.html" class="" target="_blank">Horizontal</a></li>
                            <li class=""><a href="layout-box.html" class="" target="_blank">Box layout</a></li>
                            <li class=""><a href="layout-rtl.html" class="" target="_blank">RTL</a></li>
                            <li class=""><a href="layout-light.html" class="" target="_blank">Light layout</a></li>
                            <li class=""><a href="layout-dark.html" class="" target="_blank">Dark layout <span class="pcoded-badge label label-danger">Hot</span></a></li>
                            <li class=""><a href="layout-menu-icon.html" class="" target="_blank">Color icon</a></li>
                        </ul>
                    </li>
                    <li data-username="widget Statistic Data Table User card Chart" class="nav-item pcoded-hasmenu">
                        <a href="#!" class="nav-link"><span class="pcoded-micon"><i class="feather icon-layers"></i></span><span class="pcoded-mtext">Widget</span><span class="pcoded-badge label label-info">100+</span></a>
                        <ul class="pcoded-submenu">
                            <li class=""><a href="widget-statistic.html" class="">Statistic</a></li>
                            <li class=""><a href="widget-data.html" class="">Data</a></li>
                            <li class=""><a href="widget-table.html" class="">Table</a></li>
                            <li class=""><a href="widget-user-card.html" class="">User</a></li>
                            <li class=""><a href="widget-chart.html" class="">Chart</a></li>
                        </ul>
                    </li>
                    <li class="nav-item pcoded-menu-caption">
                        <label>UI Element</label>
                    </li>
                    <li data-username="basic components Button Alert Badges breadcrumb Paggination progress Tooltip popovers Carousel Cards Collapse Tabs pills Modal Grid System Typography Extra Shadows Embeds" class="nav-item pcoded-hasmenu">
                        <a href="#!" class="nav-link"><span class="pcoded-micon"><i class="feather icon-box"></i></span><span class="pcoded-mtext">Basic</span></a>
                        <ul class="pcoded-submenu">
                            <li class=""><a href="bc_alert.html" class="">Alert</a></li>
                            <li class=""><a href="bc_button.html" class="">Button</a></li>
                            <li class=""><a href="bc_badges.html" class="">Badges</a></li>
                            <li class=""><a href="bc_breadcrumb-pagination.html" class="">Breadcrumb & paggination</a></li>
                            <li class=""><a href="bc_card.html" class="">Cards</a></li>
                            <li class=""><a href="bc_collapse.html" class="">Collapse</a></li>
                            <li class=""><a href="bc_carousel.html" class="">Carousel</a></li>
                            <li class=""><a href="bc_grid.html" class="">Grid system</a></li>
                            <li class=""><a href="bc_progress.html" class="">Progress</a></li>
                            <li class=""><a href="bc_modal.html" class="">Modal</a></li>
                            <li class=""><a href="bc_spinner.html" class="">Spinner<span class="pcoded-badge label label-danger">NEW</span></a></li>
                            <li class=""><a href="bc_tabs.html" class="">Tabs & pills</a></li>
                            <li class=""><a href="bc_typography.html" class="">Typography</a></li>
                            <li class=""><a href="bc_tooltip-popover.html" class="">Tooltip & popovers</a></li>
                            <li class=""><a href="bc_toasts.html" class="">Toasts<span class="pcoded-badge label label-danger">NEW</span></a></li>
                            <li class=""><a href="bc_extra.html" class="">Other<span class="pcoded-badge label label-primary">NEW</span></a></li>
                        </ul>
                    </li>
                    <li data-username="advance components Alert gridstack lightbox modal notification pnotify rating rangeslider slider syntax highlighter Tour Tree view Nestable Toolbar" class="nav-item pcoded-hasmenu">
                        <a href="#!" class="nav-link"><span class="pcoded-micon"><i class="feather icon-gitlab"></i></span><span class="pcoded-mtext">Advance</span></a>
                        <ul class="pcoded-submenu">
                            <li class=""><a href="ac_alert.html" class="">Sweet alert</a></li>
                            <li class=""><a href="ac-datepicker-componant.html" class="">Datepicker</a></li>
                            <li class=""><a href="ac_gridstack.html" class="">Gridstack</a></li>
                            <li class=""><a href="ac_lightbox.html" class="">Lightbox</a></li>
                            <li class=""><a href="ac_modal.html" class="">Modal</a></li>
                            <li class=""><a href="ac_notification.html" class="">Notification</a></li>
                            <li class=""><a href="ac_nestable.html" class="">Nestable</a></li>
                            <li class=""><a href="ac_pnotify.html" class="">Pnotify</a></li>
                            <li class=""><a href="ac_rating.html" class="">Rating</a></li>
                            <li class=""><a href="ac_rangeslider.html" class="">Rangeslider</a></li>
                            <li class=""><a href="ac_slider.html" class="">Slider</a></li>
                            <li class=""><a href="ac_syntax_highlighter.html" class="">Syntax highlighter</a></li>
                            <li class=""><a href="ac_tour.html" class="">Tour</a></li>
                            <li class=""><a href="ac_treeview.html" class="">Tree view</a></li>
                            <li class=""><a href="ac_toolbar.html" class="">Toolbar</a></li>
                        </ul>
                    </li>
                    <li data-username="extra components Session Timeout Session Idle Timeout Offline" class="nav-item pcoded-hasmenu">
                        <a href="#!" class="nav-link"><span class="pcoded-micon"><i class="feather icon-package"></i></span><span class="pcoded-mtext">Extra</span></a>
                        <ul class="pcoded-submenu">
                            <li class=""><a href="ec-session-timeout.html" class="">Session timeout</a></li>
                            <li class=""><a href="ec-session-idle-timeout.html" class="">Session idle timeout</a></li>
                            <li class=""><a href="ec-offline.html" class="">Offline</a></li>
                        </ul>
                    </li>
                    <li data-username="Animations" class="nav-item"><a href="animation.html" class="nav-link"><span class="pcoded-micon"><i class="feather icon-aperture"></i></span><span class="pcoded-mtext">Animations</span></a></li>
                    <li data-username="icons Feather Fontawsome flag material simple line themify" class="nav-item pcoded-hasmenu active pcoded-trigger">
                        <a href="#!" class="nav-link"><span class="pcoded-micon"><i class="feather icon-feather"></i></span><span class="pcoded-mtext">Icons</span></a>
                        <ul class="pcoded-submenu">
                            <li class=""><a href="icon-feather.html" class="">Feather<span class="pcoded-badge label label-danger">NEW</span></a></li>
                            <li class=""><a href="icon-fontawsome.html" class="">Font Awesome 5<span class="pcoded-badge label label-primary">1000+</span></a></li>
                            <li class=""><a href="icon-flag.html" class="">Flag</a></li>
                            <li class="active"><a href="icon-material.html" class="">Material</a></li>
                            <li class=""><a href="icon-simple-line.html" class="">Simple line</a></li>
                            <li class=""><a href="icon-themify.html" class="">Themify</a></li>
                        </ul>
                    </li>
                    <li class="nav-item pcoded-menu-caption">
                        <label>Forms</label>
                    </li>
                    <li data-username="form elements advance componant validation masking wizard picker select" class="nav-item pcoded-hasmenu">
                        <a href="#!" class="nav-link"><span class="pcoded-micon"><i class="feather icon-file-text"></i></span><span class="pcoded-mtext">Forms</span></a>
                        <ul class="pcoded-submenu">
                            <li class=""><a href="form_elements.html" class="">Form elements</a></li>
                            <li class=""><a href="form-elements-advance.html" class="">Form advance</a></li>
                            <li class=""><a href="form-validation.html" class="">Form validation</a></li>
                            <li class=""><a href="form-masking.html" class="">Form masking</a></li>
                            <li class=""><a href="form-wizard.html" class="">Form wizard</a></li>
                            <li class=""><a href="form-picker.html" class="">Form picker</a></li>
                            <li class=""><a href="form-select.html" class="">Form select</a></li>
                        </ul>
                    </li>
                    <li class="nav-item pcoded-menu-caption">
                        <label>table</label>
                    </li>
                    <li data-username="Table bootstrap datatable footable" class="nav-item pcoded-hasmenu">
                        <a href="#!" class="nav-link"><span class="pcoded-micon"><i class="feather icon-server"></i></span><span class="pcoded-mtext">Table</span></a>
                        <ul class="pcoded-submenu">
                            <li class=""><a href="tbl_bootstrap.html" class="">Bootstrap</a></li>
                            <li class=""><a href="tbl_datatable.html" class="">Data table</a></li>
                            <li class=""><a href="tbl_foo.html" class="">Foo table</a></li>
                        </ul>
                    </li>
                    <li class="nav-item pcoded-menu-caption">
                        <label>Chart & Maps</label>
                    </li>
                    <li data-username="Charts AM Chart js Echart Google Highchart Knob Morris Nvd3 Peity Radial" class="nav-item pcoded-hasmenu">
                        <a href="#!" class="nav-link"><span class="pcoded-micon"><i class="feather icon-pie-chart"></i></span><span class="pcoded-mtext">Chart</span></a>
                        <ul class="pcoded-submenu">
                            <li class=""><a href="chart-am.html" class="">amChart 4</a></li>
                            <li class=""><a href="chart-chartjs.html" class="">Chart js</a></li>
                            <li class=""><a href="chart-echart.html" class="">Echart</a></li>
                            <li class=""><a href="chart-google.html" class="">Google</a></li>
                            <li class=""><a href="chart-highchart.html" class="">Highchart</a></li>
                            <li class=""><a href="chart-knob.html" class="">Knob</a></li>
                            <li class=""><a href="chart-morris.html" class="">Morris</a></li>
                            <li class=""><a href="chart-nvd3.html" class="">Nvd3</a></li>
                            <li class=""><a href="chart-peity.html" class="">Peity</a></li>
                            <li class=""><a href="chart-radial.html" class="">Radial</a></li>
                        </ul>
                    </li>
                    <li data-username="Maps Google Vector Google Map Search API Location" class="nav-item pcoded-hasmenu">
                        <a href="#!" class="nav-link"><span class="pcoded-micon"><i class="feather icon-map"></i></span><span class="pcoded-mtext">Maps</span></a>
                        <ul class="pcoded-submenu">
                            <li class=""><a href="map-google.html" class="">Google</a></li>
                            <li class=""><a href="map-vector.html" class="">Vector</a></li>
                            <li class=""><a href="map-api.html" class="">Gmap search API</a></li>
                            <li class=""><a href="map-location.html" class="">Location</a></li>
                        </ul>
                    </li>
                    <li data-username="landing page" class="nav-item"><a href="extra-pages/landingpage/index.html" class="nav-link" target="_blank"><span class="pcoded-micon"><i class="feather icon-navigation-2"></i></span><span class="pcoded-mtext">Landing
                                page</span></a></li>
                    <li class="nav-item pcoded-menu-caption">
                        <label>Pages</label>
                    </li>
                    <li data-username="Authentication Sign up Sign in reset password Change password Personal information profile settings map form subscribe" class="nav-item pcoded-hasmenu">
                        <a href="#!" class="nav-link"><span class="pcoded-micon"><i class="feather icon-lock"></i></span><span class="pcoded-mtext">Authentication</span><span class="pcoded-badge label label-danger">New</span></a>
                        <ul class="pcoded-submenu">
                            <li class=""><a href="auth-signup.html" class="" target="_blank">Sign up</a></li>
                            <li class=""><a href="auth-signup-v2.html" class="" target="_blank">Sign up v2<span class="pcoded-badge label label-primary">New</span></a></li>
                            <li class=""><a href="auth-signup-v3.html" class="" target="_blank">Sign up v3<span class="pcoded-badge label label-primary">New</span></a></li>
                            <li class=""><a href="auth-signup-v4.html" class="" target="_blank">Sign up v4<span class="pcoded-badge label label-primary">New</span></a></li>
                            <li class=""><a href="auth-signup-v5.html" class="" target="_blank">Sign up v5<span class="pcoded-badge label label-primary">New</span></a></li>
                            <li class=""><a href="auth-signin.html" class="" target="_blank">Sign in</a></li>
                            <li class=""><a href="auth-signin-v2.html" class="" target="_blank">Sign in v2<span class="pcoded-badge label label-primary">New</span></a></li>
                            <li class=""><a href="auth-signin-v3.html" class="" target="_blank">Sign in v3<span class="pcoded-badge label label-primary">New</span></a></li>
                            <li class=""><a href="auth-signin-v4.html" class="" target="_blank">Sign in v4<span class="pcoded-badge label label-primary">New</span></a></li>
                            <li class=""><a href="auth-signin-v5.html" class="" target="_blank">Sign in v5<span class="pcoded-badge label label-primary">New</span></a></li>
                            <li class=""><a href="auth-reset-password.html" class="" target="_blank">Reset password</a></li>
                            <li class=""><a href="auth-reset-password-v2.html" class="" target="_blank">Reset password v2<span class="pcoded-badge label label-primary">New</span></a></li>
                            <li class=""><a href="auth-reset-password-v3.html" class="" target="_blank">Reset password v3<span class="pcoded-badge label label-primary">New</span></a></li>
                            <li class=""><a href="auth-reset-password-v4.html" class="" target="_blank">Reset password v4<span class="pcoded-badge label label-primary">New</span></a></li>
                            <li class=""><a href="auth-reset-password-v5.html" class="" target="_blank">Reset password v5<span class="pcoded-badge label label-primary">New</span></a></li>
                            <li class=""><a href="auth-change-password.html" class="" target="_blank">Change password</a></li>
                            <li class=""><a href="auth-Personal-Information.html" class="" target="_blank">Personal information</a></li>
                            <li class=""><a href="auth-profile-settings.html" class="" target="_blank">Profile settings</a></li>
                            <li class=""><a href="auth-map-form.html" class="" target="_blank">Map form</a></li>
                            <li class=""><a href="auth-subscribe.html" class="" target="_blank">Subscribe</a></li>
                        </ul>
                    </li>
                    <li data-username="Maintenance Error Comming soon offline ui" class="nav-item pcoded-hasmenu">
                        <a href="#!" class="nav-link"><span class="pcoded-micon"><i class="feather icon-sliders"></i></span><span class="pcoded-mtext">Maintenance</span></a>
                        <ul class="pcoded-submenu">
                            <li class=""><a href="maint-error.html" class="">Error</a></li>
                            <li class=""><a href="maint-coming-soon.html" class="">Coming soon</a></li>
                            <li class=""><a href="maint-offline-ui.html" class="" target="_blank">Offline UI</a></li>
                        </ul>
                    </li>
                    <li class="nav-item pcoded-menu-caption">
                        <label>App</label>
                    </li>
                    <li data-username="message" class="nav-item"><a href="message.html" class="nav-link"><span class="pcoded-micon"><i class="feather icon-message-circle"></i></span><span class="pcoded-mtext">Message</span></a></li>
                    <li data-username="Task list board details" class="nav-item pcoded-hasmenu">
                        <a href="#!" class="nav-link"><span class="pcoded-micon"><i class="feather icon-clipboard"></i></span><span class="pcoded-mtext">Task</span></a>
                        <ul class="pcoded-submenu">
                            <li class=""><a href="task-list.html" class="">List</a></li>
                            <li class=""><a href="task-board.html" class="">Board</a></li>
                            <li class=""><a href="task-detail.html" class="">Detail</a></li>
                        </ul>
                    </li>
                    <li data-username="To-Do notes" class="nav-item pcoded-hasmenu">
                        <a href="#!" class="nav-link"><span class="pcoded-micon"><i class="feather icon-check-square"></i></span><span class="pcoded-mtext">To-Do</span></a>
                        <ul class="pcoded-submenu">
                            <li class=""><a href="todo.html" class="">To-Do</a></li>
                            <li class=""><a href="notes.html" class="">Notes</a></li>
                        </ul>
                    </li>
                    <li data-username="Gallery Grid Masonry Advance" class="nav-item pcoded-hasmenu">
                        <a href="#!" class="nav-link"><span class="pcoded-micon"><i class="feather icon-image"></i></span><span class="pcoded-mtext">Gallery</span></a>
                        <ul class="pcoded-submenu">
                            <li class=""><a href="gallery-grid.html" class="">Grid</a></li>
                            <li class=""><a href="gallery-masonry.html" class="">Masonry</a></li>
                            <li class=""><a href="gallery-advance.html" class="">Advance</a></li>
                        </ul>
                    </li>
                    <li class="nav-item pcoded-menu-caption">
                        <label>Extension</label>
                    </li>
                    <li data-username="Editor CK-Editor Tinemce" class="nav-item pcoded-hasmenu">
                        <a href="#!" class="nav-link"><span class="pcoded-micon"><i class="feather icon-file-plus"></i></span><span class="pcoded-mtext">Editor</span></a>
                        <ul class="pcoded-submenu">
                            <li class="pcoded-hasmenu">
                                <a href="#!" class="">CK editor</a>
                                <ul class="pcoded-submenu">
                                    <li class=""><a href="editor-classic.html" class="">Classic</a></li>
                                    <li class=""><a href="editor-balloon.html" class="">Balloon</a></li>
                                    <li class=""><a href="editor-inline.html" class="">Inline</a></li>
                                    <li class=""><a href="editor-document.html" class="">Document</a></li>
                                </ul>
                            </li>
                            <li class=""><a href="editor-tinymce.html" class="">Tinymce editor</a></li>
                        </ul>
                    </li>
                    <li data-username="Invoice Summury List" class="nav-item pcoded-hasmenu">
                        <a href="#!" class="nav-link"><span class="pcoded-micon"><i class="feather icon-file-minus"></i></span><span class="pcoded-mtext">Invoice</span></a>
                        <ul class="pcoded-submenu">
                            <li class=""><a href="invoice.html" class="">Invoice</a></li>
                            <li class=""><a href="invoice-summary.html" class="">Invoice summary</a></li>
                            <li class=""><a href="invoice-list.html" class="">Invoice list</a></li>
                        </ul>
                    </li>
                    <li data-username="Full Calendar" class="nav-item"><a href="full-calendar.html" class="nav-link"><span class="pcoded-micon"><i class="feather icon-calendar"></i></span><span class="pcoded-mtext">Full calendar</span></a></li>
                    <li data-username="File Upload" class="nav-item"><a href="file-upload.html" class="nav-link"><span class="pcoded-micon"><i class="feather icon-upload-cloud"></i></span><span class="pcoded-mtext">File upload</span></a></li>
                    <li class="nav-item pcoded-menu-caption">
                        <label>Other</label>
                    </li>
                    <li data-username="Menu levels Menu level 2.1 Menu level 2.2" class="nav-item pcoded-hasmenu">
                        <a href="#!" class="nav-link"><span class="pcoded-micon"><i class="feather icon-menu"></i></span><span class="pcoded-mtext">Menu levels</span></a>
                        <ul class="pcoded-submenu">
                            <li class=""><a href="" class="">Menu Level 2.1</a></li>
                            <li class="pcoded-hasmenu">
                                <a href="#!" class="">Menu level 2.2</a>
                                <ul class="pcoded-submenu">
                                    <li class=""><a href="" class="">Menu level 3.1</a></li>
                                    <li class=""><a href="" class="">Menu level 3.2</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li data-username="Disabled Menu" class="nav-item disabled"><a href="#!" class="nav-link"><span class="pcoded-micon"><i class="feather icon-power"></i></span><span class="pcoded-mtext">Disabled menu</span></a></li>
                    <li data-username="Sample Page" class="nav-item"><a href="sample-page.html" class="nav-link"><span class="pcoded-micon"><i class="feather icon-sidebar"></i></span><span class="pcoded-mtext">Sample page</span></a></li>
                    <li class="nav-item pcoded-menu-caption">
                        <label>Support</label>
                    </li>
                    <li data-username="Documentation" class="nav-item"><a href="docs.html" class="nav-link" target="_blank"><span class="pcoded-micon"><i class="feather icon-book"></i></span><span class="pcoded-mtext">Documentation</span></a></li>
                    <li data-username="Need Support" class="nav-item"><a href="https://codedthemes.support-hub.io/" class="nav-link" target="_blank"><span class="pcoded-micon"><i class="feather icon-help-circle"></i></span><span class="pcoded-mtext">Need
                                support ?</span></a></li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- [ navigation menu ] end -->

    <!-- [ Header ] start -->
    <header class="navbar pcoded-header navbar-expand-lg navbar-light">
        <div class="m-header">
            <a class="mobile-menu" id="mobile-collapse1" href="#!"><span></span></a>
            <a href="index.html" class="b-brand">
                   <div class="b-bg">
                       <i class="feather icon-trending-up"></i>
                   </div>
                   <span class="b-title">Datta Able</span>
               </a>
        </div>
        <a class="mobile-menu" id="mobile-header" href="#!">
            <i class="feather icon-more-horizontal"></i>
        </a>
        <div class="collapse navbar-collapse">
            <ul class="navbar-nav mr-auto">
                <li><a href="#!" class="full-screen" onclick="javascript:toggleFullScreen()"><i class="feather icon-maximize"></i></a></li>
                <li class="nav-item dropdown">
                    <a class="dropdown-toggle" href="#" data-toggle="dropdown">Dropdown</a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#!">Action</a></li>
                        <li><a class="dropdown-item" href="#!">Another action</a></li>
                        <li><a class="dropdown-item" href="#!">Something else here</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <div class="main-search">
                        <div class="input-group">
                            <input type="text" id="m-search" class="form-control" placeholder="Search . . .">
                            <a href="#!" class="input-group-append search-close">
                                <i class="feather icon-x input-group-text"></i>
                            </a>
                            <span class="input-group-append search-btn btn btn-primary">
                                <i class="feather icon-search input-group-text"></i>
                            </span>
                        </div>
                    </div>
                </li>
            </ul>
            <ul class="navbar-nav ml-auto">
                <li>
                    <div class="dropdown">
                        <a class="dropdown-toggle" href="#" data-toggle="dropdown"><i class="icon feather icon-bell"></i></a>
                        <div class="dropdown-menu dropdown-menu-right notification">
                            <div class="noti-head">
                                <h6 class="d-inline-block m-b-0">Notifications</h6>
                                <div class="float-right">
                                    <a href="#!" class="m-r-10">mark as read</a>
                                    <a href="#!">clear all</a>
                                </div>
                            </div>
                            <ul class="noti-body">
                                <li class="n-title">
                                    <p class="m-b-0">NEW</p>
                                </li>
                                <li class="notification">
                                    <div class="media">
                                        <img class="img-radius" src="assets/images/user/avatar-1.jpg" alt="Generic placeholder image">
                                        <div class="media-body">
                                            <p><strong>John Doe</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>30 min</span></p>
                                            <p>New ticket Added</p>
                                        </div>
                                    </div>
                                </li>
                                <li class="n-title">
                                    <p class="m-b-0">EARLIER</p>
                                </li>
                                <li class="notification">
                                    <div class="media">
                                        <img class="img-radius" src="assets/images/user/avatar-2.jpg" alt="Generic placeholder image">
                                        <div class="media-body">
                                            <p><strong>Joseph William</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>30 min</span></p>
                                            <p>Prchace New Theme and make payment</p>
                                        </div>
                                    </div>
                                </li>
                                <li class="notification">
                                    <div class="media">
                                        <img class="img-radius" src="assets/images/user/avatar-3.jpg" alt="Generic placeholder image">
                                        <div class="media-body">
                                            <p><strong>Sara Soudein</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>30 min</span></p>
                                            <p>currently login</p>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                            <div class="noti-footer">
                                <a href="#!">show all</a>
                            </div>
                        </div>
                    </div>
                </li>
                <li><a href="#!" class="displayChatbox"><i class="icon feather icon-mail"></i></a></li>
                <li>
                    <div class="dropdown drp-user">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <i class="icon feather icon-settings"></i>
                        </a>
                        <div class="dropdown-menu dropdown-menu-right profile-notification">
                            <div class="pro-head">
                                <img src="assets/images/user/avatar-1.jpg" class="img-radius" alt="User-Profile-Image">
                                <span>John Doe</span>
                                <a href="auth-signin.html" class="dud-logout" title="Logout">
                                    <i class="feather icon-log-out"></i>
                                </a>
                            </div>
                            <ul class="pro-body">
                                <li><a href="#!" class="dropdown-item"><i class="feather icon-settings"></i> Settings</a></li>
                                <li><a href="#!" class="dropdown-item"><i class="feather icon-user"></i> Profile</a></li>
                                <li><a href="message.html" class="dropdown-item"><i class="feather icon-mail"></i> My Messages</a></li>
                                <li><a href="auth-signin.html" class="dropdown-item"><i class="feather icon-lock"></i> Lock Screen</a></li>
                            </ul>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </header>
    <!-- [ Header ] end -->

    <!-- [ chat user list ] start -->
    <section class="header-user-list">
        <div class="h-list-header">
            <div class="input-group">
                <input type="text" id="search-friends" class="form-control" placeholder="Search Friend . . .">
            </div>
        </div>
        <div class="h-list-body">
            <a href="#!" class="h-close-text"><i class="feather icon-chevrons-right"></i></a>
            <div class="main-friend-cont scroll-div">
                <div class="main-friend-list">
                    <div class="media userlist-box" data-id="1" data-status="online" data-username="Josephin Doe">
                        <a class="media-left" href="#!"><img class="media-object img-radius" src="assets/images/user/avatar-1.jpg" alt="Generic placeholder image ">
                            <div class="live-status">3</div>
                        </a>
                        <div class="media-body">
                            <h6 class="chat-header">Josephin Doe<small class="d-block text-c-green">Typing . . </small></h6>
                        </div>
                    </div>
                    <div class="media userlist-box" data-id="2" data-status="online" data-username="Lary Doe">
                        <a class="media-left" href="#!"><img class="media-object img-radius" src="assets/images/user/avatar-2.jpg" alt="Generic placeholder image">
                            <div class="live-status">1</div>
                        </a>
                        <div class="media-body">
                            <h6 class="chat-header">Lary Doe<small class="d-block text-c-green">online</small></h6>
                        </div>
                    </div>
                    <div class="media userlist-box" data-id="3" data-status="online" data-username="Alice">
                        <a class="media-left" href="#!"><img class="media-object img-radius" src="assets/images/user/avatar-3.jpg" alt="Generic placeholder image"></a>
                        <div class="media-body">
                            <h6 class="chat-header">Alice<small class="d-block text-c-green">online</small></h6>
                        </div>
                    </div>
                    <div class="media userlist-box" data-id="4" data-status="offline" data-username="Alia">
                        <a class="media-left" href="#!"><img class="media-object img-radius" src="assets/images/user/avatar-1.jpg" alt="Generic placeholder image">
                            <div class="live-status">1</div>
                        </a>
                        <div class="media-body">
                            <h6 class="chat-header">Alia<small class="d-block text-muted">10 min ago</small></h6>
                        </div>
                    </div>
                    <div class="media userlist-box" data-id="5" data-status="offline" data-username="Suzen">
                        <a class="media-left" href="#!"><img class="media-object img-radius" src="assets/images/user/avatar-4.jpg" alt="Generic placeholder image"></a>
                        <div class="media-body">
                            <h6 class="chat-header">Suzen<small class="d-block text-muted">15 min ago</small></h6>
                        </div>
                    </div>
                    <div class="media userlist-box" data-id="1" data-status="online" data-username="Josephin Doe">
                        <a class="media-left" href="#!"><img class="media-object img-radius" src="assets/images/user/avatar-1.jpg" alt="Generic placeholder image ">
                            <div class="live-status">3</div>
                        </a>
                        <div class="media-body">
                            <h6 class="chat-header">Josephin Doe<small class="d-block text-c-green">Typing . . </small></h6>
                        </div>
                    </div>
                    <div class="media userlist-box" data-id="2" data-status="online" data-username="Lary Doe">
                        <a class="media-left" href="#!"><img class="media-object img-radius" src="assets/images/user/avatar-2.jpg" alt="Generic placeholder image">
                            <div class="live-status">1</div>
                        </a>
                        <div class="media-body">
                            <h6 class="chat-header">Lary Doe<small class="d-block text-c-green">online</small></h6>
                        </div>
                    </div>
                    <div class="media userlist-box" data-id="3" data-status="online" data-username="Alice">
                        <a class="media-left" href="#!"><img class="media-object img-radius" src="assets/images/user/avatar-3.jpg" alt="Generic placeholder image"></a>
                        <div class="media-body">
                            <h6 class="chat-header">Alice<small class="d-block text-c-green">online</small></h6>
                        </div>
                    </div>
                    <div class="media userlist-box" data-id="4" data-status="offline" data-username="Alia">
                        <a class="media-left" href="#!"><img class="media-object img-radius" src="assets/images/user/avatar-1.jpg" alt="Generic placeholder image">
                            <div class="live-status">1</div>
                        </a>
                        <div class="media-body">
                            <h6 class="chat-header">Alia<small class="d-block text-muted">10 min ago</small></h6>
                        </div>
                    </div>
                    <div class="media userlist-box" data-id="5" data-status="offline" data-username="Suzen">
                        <a class="media-left" href="#!"><img class="media-object img-radius" src="assets/images/user/avatar-4.jpg" alt="Generic placeholder image"></a>
                        <div class="media-body">
                            <h6 class="chat-header">Suzen<small class="d-block text-muted">15 min ago</small></h6>
                        </div>
                    </div>
                    <div class="media userlist-box" data-id="1" data-status="online" data-username="Josephin Doe">
                        <a class="media-left" href="#!"><img class="media-object img-radius" src="assets/images/user/avatar-1.jpg" alt="Generic placeholder image ">
                            <div class="live-status">3</div>
                        </a>
                        <div class="media-body">
                            <h6 class="chat-header">Josephin Doe<small class="d-block text-c-green">Typing . . </small></h6>
                        </div>
                    </div>
                    <div class="media userlist-box" data-id="2" data-status="online" data-username="Lary Doe">
                        <a class="media-left" href="#!"><img class="media-object img-radius" src="assets/images/user/avatar-2.jpg" alt="Generic placeholder image">
                            <div class="live-status">1</div>
                        </a>
                        <div class="media-body">
                            <h6 class="chat-header">Lary Doe<small class="d-block text-c-green">online</small></h6>
                        </div>
                    </div>
                    <div class="media userlist-box" data-id="3" data-status="online" data-username="Alice">
                        <a class="media-left" href="#!"><img class="media-object img-radius" src="assets/images/user/avatar-3.jpg" alt="Generic placeholder image"></a>
                        <div class="media-body">
                            <h6 class="chat-header">Alice<small class="d-block text-c-green">online</small></h6>
                        </div>
                    </div>
                    <div class="media userlist-box" data-id="4" data-status="offline" data-username="Alia">
                        <a class="media-left" href="#!"><img class="media-object img-radius" src="assets/images/user/avatar-1.jpg" alt="Generic placeholder image">
                            <div class="live-status">1</div>
                        </a>
                        <div class="media-body">
                            <h6 class="chat-header">Alia<small class="d-block text-muted">10 min ago</small></h6>
                        </div>
                    </div>
                    <div class="media userlist-box" data-id="5" data-status="offline" data-username="Suzen">
                        <a class="media-left" href="#!"><img class="media-object img-radius" src="assets/images/user/avatar-4.jpg" alt="Generic placeholder image"></a>
                        <div class="media-body">
                            <h6 class="chat-header">Suzen<small class="d-block text-muted">15 min ago</small></h6>
                        </div>
                    </div>
                    <div class="media userlist-box" data-id="1" data-status="online" data-username="Josephin Doe">
                        <a class="media-left" href="#!"><img class="media-object img-radius" src="assets/images/user/avatar-1.jpg" alt="Generic placeholder image ">
                            <div class="live-status">3</div>
                        </a>
                        <div class="media-body">
                            <h6 class="chat-header">Josephin Doe<small class="d-block text-c-green">Typing . . </small></h6>
                        </div>
                    </div>
                    <div class="media userlist-box" data-id="2" data-status="online" data-username="Lary Doe">
                        <a class="media-left" href="#!"><img class="media-object img-radius" src="assets/images/user/avatar-2.jpg" alt="Generic placeholder image">
                            <div class="live-status">1</div>
                        </a>
                        <div class="media-body">
                            <h6 class="chat-header">Lary Doe<small class="d-block text-c-green">online</small></h6>
                        </div>
                    </div>
                    <div class="media userlist-box" data-id="3" data-status="online" data-username="Alice">
                        <a class="media-left" href="#!"><img class="media-object img-radius" src="assets/images/user/avatar-3.jpg" alt="Generic placeholder image"></a>
                        <div class="media-body">
                            <h6 class="chat-header">Alice<small class="d-block text-c-green">online</small></h6>
                        </div>
                    </div>
                    <div class="media userlist-box" data-id="4" data-status="offline" data-username="Alia">
                        <a class="media-left" href="#!"><img class="media-object img-radius" src="assets/images/user/avatar-1.jpg" alt="Generic placeholder image">
                            <div class="live-status">1</div>
                        </a>
                        <div class="media-body">
                            <h6 class="chat-header">Alia<small class="d-block text-muted">10 min ago</small></h6>
                        </div>
                    </div>
                    <div class="media userlist-box" data-id="5" data-status="offline" data-username="Suzen">
                        <a class="media-left" href="#!"><img class="media-object img-radius" src="assets/images/user/avatar-4.jpg" alt="Generic placeholder image"></a>
                        <div class="media-body">
                            <h6 class="chat-header">Suzen<small class="d-block text-muted">15 min ago</small></h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- [ chat user list ] end -->

    <!-- [ chat message ] start -->
    <section class="header-chat">
        <div class="h-list-header">
            <h6>Josephin Doe</h6>
            <a href="#!" class="h-back-user-list"><i class="feather icon-chevron-left"></i></a>
        </div>
        <div class="h-list-body">
            <div class="main-chat-cont scroll-div">
                <div class="main-friend-chat">
                    <div class="media chat-messages">
                        <a class="media-left photo-table" href="#!"><img class="media-object img-radius img-radius m-t-5" src="assets/images/user/avatar-2.jpg" alt="Generic placeholder image"></a>
                        <div class="media-body chat-menu-content">
                            <div class="">
                                <p class="chat-cont">hello Datta! Will you tell me something</p>
                                <p class="chat-cont">about yourself?</p>
                            </div>
                            <p class="chat-time">8:20 a.m.</p>
                        </div>
                    </div>
                    <div class="media chat-messages">
                        <div class="media-body chat-menu-reply">
                            <div class="">
                                <p class="chat-cont">Ohh! very nice</p>
                            </div>
                            <p class="chat-time">8:22 a.m.</p>
                        </div>
                    </div>
                    <div class="media chat-messages">
                        <a class="media-left photo-table" href="#!"><img class="media-object img-radius img-radius m-t-5" src="assets/images/user/avatar-2.jpg" alt="Generic placeholder image"></a>
                        <div class="media-body chat-menu-content">
                            <div class="">
                                <p class="chat-cont">can you help me?</p>
                            </div>
                            <p class="chat-time">8:20 a.m.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="h-list-footer">
            <div class="input-group">
                <input type="file" class="chat-attach" style="display:none">
                <a href="#!" class="input-group-prepend btn btn-success btn-attach">
                    <i class="feather icon-paperclip"></i>
                </a>
                <input type="text" name="h-chat-text" class="form-control h-send-chat" placeholder="Write hear . . ">
                <button type="submit" class="input-group-append btn-send btn btn-primary">
                    <i class="feather icon-message-circle"></i>
                </button>
            </div>
        </div>
    </section>
    <!-- [ chat message ] end -->

    <!-- [ Main Content ] start -->
    <div class="pcoded-main-container">
        <div class="pcoded-wrapper">
            <div class="pcoded-content">
                <div class="pcoded-inner-content">
                    <!-- [ breadcrumb ] start -->
                    <div class="page-header">
                        <div class="page-block">
                            <div class="row align-items-center">
                                <div class="col-md-12">
                                    <div class="page-header-title">
                                        <h5 class="m-b-10">Material</h5>
                                    </div>
                                    <ul class="breadcrumb">
                                        <li class="breadcrumb-item"><a href="index.html"><i class="feather icon-home"></i></a></li>
                                        <li class="breadcrumb-item"><a href="#!">Icons</a></li>
                                        <li class="breadcrumb-item"><a href="#!">Material</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- [ breadcrumb ] end -->
                    <div class="main-body">
                        <div class="page-wrapper">
                            <!-- [ Main Content ] start -->
                            <div class="row">
                                <!-- [ material-icon ] start -->
                                <div class="col-sm-12">
                                    <div class="card">
                                        <div class="card-header">
                                            <h5>Material Icon</h5>
                                        </div>
                                        <div class="card-block text-center">
                                            <div class="row justify-content-center">
                                                <div class="col-sm-6">
                                                    <input type="text" id="icon-search" class="form-control mb-4" placeholder="search . . ">
                                                </div>
                                            </div>
                                            <div class="i-main" id="icon-wrapper"></div>
                                        </div>
                                    </div>
                                </div>
                                <!-- [ material-icon ] end -->
                            </div>
                            <!-- [ Main Content ] end -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- [ Main Content ] end -->

    <!-- Warning Section start -->
    <!-- Older IE warning message -->
    <!--[if lt IE 11]>
        <div class="ie-warning">
            <h1>Warning!!</h1>
            <p>You are using an outdated version of Internet Explorer, please upgrade
               <br/>to any of the following web browsers to access this website.
            </p>
            <div class="iew-container">
                <ul class="iew-download">
                    <li>
                        <a href="http://www.google.com/chrome/">
                            <img src="assets/images/browser/chrome.png" alt="Chrome">
                            <div>Chrome</div>
                        </a>
                    </li>
                    <li>
                        <a href="https://www.mozilla.org/en-US/firefox/new/">
                            <img src="assets/images/browser/firefox.png" alt="Firefox">
                            <div>Firefox</div>
                        </a>
                    </li>
                    <li>
                        <a href="http://www.opera.com">
                            <img src="assets/images/browser/opera.png" alt="Opera">
                            <div>Opera</div>
                        </a>
                    </li>
                    <li>
                        <a href="https://www.apple.com/safari/">
                            <img src="assets/images/browser/safari.png" alt="Safari">
                            <div>Safari</div>
                        </a>
                    </li>
                    <li>
                        <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">
                            <img src="assets/images/browser/ie.png" alt="">
                            <div>IE (11 & above)</div>
                        </a>
                    </li>
                </ul>
            </div>
            <p>Sorry for the inconvenience!</p>
        </div>
    <![endif]-->
    <!-- Warning Section Ends -->

    <!-- Required Js -->
    <script src="assets/js/vendor-all.min.js"></script>
    <script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="assets/js/pcoded.min.js"></script>
    <script src="assets/js/menu-setting.min.js"></script>
    <script src="assets/plugins/clipboard/js/clipboard.js"></script>

    <script type="text/javascript">
        var iconlist = ['mdi-access-point', 'mdi-access-point-network', 'mdi-account', 'mdi-account-alert', 'mdi-account-box', 'mdi-account-box-multiple', 'mdi-account-box-outline', 'mdi-account-card-details', 'mdi-account-check',
            'mdi-account-circle', 'mdi-account-convert', 'mdi-account-edit', 'mdi-account-group', 'mdi-account-heart', 'mdi-account-key', 'mdi-account-location', 'mdi-account-minus', 'mdi-account-multiple', 'mdi-account-multiple-check',
            'mdi-account-multiple-minus', 'mdi-account-multiple-outline', 'mdi-account-multiple-plus', 'mdi-account-multiple-plus-outline', 'mdi-account-network', 'mdi-account-off', 'mdi-account-outline', 'mdi-account-plus',
            'mdi-account-plus-outline', 'mdi-account-remove', 'mdi-account-search', 'mdi-account-search-outline', 'mdi-account-settings', 'mdi-account-settings-variant', 'mdi-account-star', 'mdi-account-switch', 'mdi-accusoft', 'mdi-adjust',
            'mdi-adobe', 'mdi-air-conditioner', 'mdi-airballoon', 'mdi-airplane', 'mdi-airplane-landing', 'mdi-airplane-off', 'mdi-airplane-takeoff', 'mdi-airplay', 'mdi-airport', 'mdi-alarm', 'mdi-alarm-bell', 'mdi-alarm-check',
            'mdi-alarm-light', 'mdi-alarm-multiple', 'mdi-alarm-off', 'mdi-alarm-plus', 'mdi-alarm-snooze', 'mdi-album', 'mdi-alert', 'mdi-alert-box',
            'mdi-alert-circle', 'mdi-alert-circle-outline', 'mdi-alert-decagram', 'mdi-alert-octagon', 'mdi-alert-octagram', 'mdi-alert-outline', 'mdi-alien', 'mdi-all-inclusive', 'mdi-alpha', 'mdi-alphabetical', 'mdi-altimeter', 'mdi-amazon',
            'mdi-amazon-alexa', 'mdi-amazon-drive', 'mdi-ambulance', 'mdi-amplifier', 'mdi-anchor', 'mdi-android', 'mdi-android-debug-bridge', 'mdi-android-head', 'mdi-android-studio', 'mdi-angle-acute', 'mdi-angle-obtuse', 'mdi-angle-right',
            'mdi-angular', 'mdi-angularjs', 'mdi-animation', 'mdi-animation-play', 'mdi-anvil', 'mdi-apple', 'mdi-apple-finder', 'mdi-apple-icloud', 'mdi-apple-ios', 'mdi-apple-keyboard-caps', 'mdi-apple-keyboard-command',
            'mdi-apple-keyboard-control', 'mdi-apple-keyboard-option', 'mdi-apple-keyboard-shift', 'mdi-apple-safari', 'mdi-application', 'mdi-apps', 'mdi-arch', 'mdi-archive', 'mdi-arrange-bring-forward', 'mdi-arrange-bring-to-front',
            'mdi-arrange-send-backward', 'mdi-arrange-send-to-back', 'mdi-arrow-all', 'mdi-arrow-bottom-left', 'mdi-arrow-bottom-left-bold-outline', 'mdi-arrow-bottom-left-thick', 'mdi-arrow-bottom-right', 'mdi-arrow-bottom-right-bold-outline',
            'mdi-arrow-bottom-right-thick', 'mdi-arrow-collapse', 'mdi-arrow-collapse-all', 'mdi-arrow-collapse-down', 'mdi-arrow-collapse-horizontal', 'mdi-arrow-collapse-left', 'mdi-arrow-collapse-right', 'mdi-arrow-collapse-up',
            'mdi-arrow-collapse-vertical', 'mdi-arrow-decision', 'mdi-arrow-decision-auto', 'mdi-arrow-decision-auto-outline', 'mdi-arrow-decision-outline', 'mdi-arrow-down', 'mdi-arrow-down-bold', 'mdi-arrow-down-bold-box',
            'mdi-arrow-down-bold-box-outline', 'mdi-arrow-down-bold-circle', 'mdi-arrow-down-bold-circle-outline', 'mdi-arrow-down-bold-hexagon-outline', 'mdi-arrow-down-bold-outline', 'mdi-arrow-down-box', 'mdi-arrow-down-drop-circle',
            'mdi-arrow-down-drop-circle-outline', 'mdi-arrow-down-thick', 'mdi-arrow-expand', 'mdi-arrow-expand-all', 'mdi-arrow-expand-down', 'mdi-arrow-expand-horizontal', 'mdi-arrow-expand-left', 'mdi-arrow-expand-right',
            'mdi-arrow-expand-up', 'mdi-arrow-expand-vertical', 'mdi-arrow-left', 'mdi-arrow-left-bold', 'mdi-arrow-left-bold-box', 'mdi-arrow-left-bold-box-outline', 'mdi-arrow-left-bold-circle', 'mdi-arrow-left-bold-circle-outline',
            'mdi-arrow-left-bold-hexagon-outline', 'mdi-arrow-left-bold-outline', 'mdi-arrow-left-box', 'mdi-arrow-left-drop-circle', 'mdi-arrow-left-drop-circle-outline', 'mdi-arrow-left-right-bold-outline', 'mdi-arrow-left-thick',
            'mdi-arrow-right', 'mdi-arrow-right-bold', 'mdi-arrow-right-bold-box', 'mdi-arrow-right-bold-box-outline', 'mdi-arrow-right-bold-circle', 'mdi-arrow-right-bold-circle-outline', 'mdi-arrow-right-bold-hexagon-outline',
            'mdi-arrow-right-bold-outline', 'mdi-arrow-right-box', 'mdi-arrow-right-drop-circle', 'mdi-arrow-right-drop-circle-outline', 'mdi-arrow-right-thick', 'mdi-arrow-split-horizontal', 'mdi-arrow-split-vertical', 'mdi-arrow-top-left',
            'mdi-arrow-top-left-bold-outline', 'mdi-arrow-top-left-thick', 'mdi-arrow-top-right', 'mdi-arrow-top-right-bold-outline', 'mdi-arrow-top-right-thick', 'mdi-arrow-up', 'mdi-arrow-up-bold', 'mdi-arrow-up-bold-box',
            'mdi-arrow-up-bold-box-outline', 'mdi-arrow-up-bold-circle', 'mdi-arrow-up-bold-circle-outline', 'mdi-arrow-up-bold-hexagon-outline', 'mdi-arrow-up-bold-outline', 'mdi-arrow-up-box', 'mdi-arrow-up-down-bold-outline',
            'mdi-arrow-up-drop-circle', 'mdi-arrow-up-drop-circle-outline', 'mdi-arrow-up-thick', 'mdi-artist', 'mdi-aspect-ratio', 'mdi-assistant', 'mdi-asterisk', 'mdi-at', 'mdi-atlassian', 'mdi-atom', 'mdi-attachment', 'mdi-audio-video',
            'mdi-audiobook', 'mdi-augmented-reality', 'mdi-auto-fix', 'mdi-auto-upload', 'mdi-autorenew', 'mdi-av-timer', 'mdi-axe', 'mdi-azure', 'mdi-babel', 'mdi-baby', 'mdi-baby-buggy', 'mdi-backburger', 'mdi-backspace', 'mdi-backup-restore',
            'mdi-badminton', 'mdi-balloon', 'mdi-ballot', 'mdi-ballot-outline', 'mdi-bandcamp', 'mdi-bank', 'mdi-bank-transfer', 'mdi-bank-transfer-in', 'mdi-bank-transfer-out', 'mdi-barcode', 'mdi-barcode-scan', 'mdi-barley', 'mdi-barrel',
            'mdi-baseball', 'mdi-baseball-bat', 'mdi-basecamp', 'mdi-basket', 'mdi-basket-fill', 'mdi-basket-unfill', 'mdi-basketball', 'mdi-battery', 'mdi-battery-10', 'mdi-battery-10-bluetooth', 'mdi-battery-20', 'mdi-battery-20-bluetooth',
            'mdi-battery-30', 'mdi-battery-30-bluetooth', 'mdi-battery-40', 'mdi-battery-40-bluetooth', 'mdi-battery-50', 'mdi-battery-50-bluetooth', 'mdi-battery-60', 'mdi-battery-60-bluetooth', 'mdi-battery-70', 'mdi-battery-70-bluetooth',
            'mdi-battery-80', 'mdi-battery-80-bluetooth', 'mdi-battery-90', 'mdi-battery-90-bluetooth', 'mdi-battery-alert', 'mdi-battery-alert-bluetooth', 'mdi-battery-bluetooth', 'mdi-battery-bluetooth-variant', 'mdi-battery-charging',
            'mdi-battery-charging-10', 'mdi-battery-charging-100', 'mdi-battery-charging-20', 'mdi-battery-charging-30', 'mdi-battery-charging-40', 'mdi-battery-charging-50', 'mdi-battery-charging-60', 'mdi-battery-charging-70',
            'mdi-battery-charging-80', 'mdi-battery-charging-90', 'mdi-battery-charging-outline', 'mdi-battery-charging-wireless', 'mdi-battery-charging-wireless-10', 'mdi-battery-charging-wireless-20', 'mdi-battery-charging-wireless-30',
            'mdi-battery-charging-wireless-40', 'mdi-battery-charging-wireless-50', 'mdi-battery-charging-wireless-60', 'mdi-battery-charging-wireless-70', 'mdi-battery-charging-wireless-80', 'mdi-battery-charging-wireless-90',
            'mdi-battery-charging-wireless-alert', 'mdi-battery-charging-wireless-outline', 'mdi-battery-minus', 'mdi-battery-negative', 'mdi-battery-outline', 'mdi-battery-plus', 'mdi-battery-positive', 'mdi-battery-unknown',
            'mdi-battery-unknown-bluetooth', 'mdi-beach', 'mdi-beaker', 'mdi-beats', 'mdi-bed-empty', 'mdi-beer', 'mdi-behance', 'mdi-bell', 'mdi-bell-off', 'mdi-bell-outline', 'mdi-bell-plus', 'mdi-bell-ring', 'mdi-bell-ring-outline',
            'mdi-bell-sleep', 'mdi-beta', 'mdi-betamax', 'mdi-bible', 'mdi-bike', 'mdi-bing', 'mdi-binoculars', 'mdi-bio', 'mdi-biohazard', 'mdi-bitbucket', 'mdi-bitcoin', 'mdi-black-mesa', 'mdi-blackberry', 'mdi-blender', 'mdi-blinds',
            'mdi-block-helper', 'mdi-blogger', 'mdi-bluetooth', 'mdi-bluetooth-audio', 'mdi-bluetooth-connect', 'mdi-bluetooth-off', 'mdi-bluetooth-settings', 'mdi-bluetooth-transfer', 'mdi-blur', 'mdi-blur-linear', 'mdi-blur-off',
            'mdi-blur-radial', 'mdi-bomb', 'mdi-bomb-off', 'mdi-bone', 'mdi-book', 'mdi-book-minus', 'mdi-book-multiple', 'mdi-book-multiple-variant', 'mdi-book-open', 'mdi-book-open-page-variant', 'mdi-book-open-variant', 'mdi-book-plus',
            'mdi-book-secure', 'mdi-book-unsecure', 'mdi-book-variant', 'mdi-bookmark', 'mdi-bookmark-check', 'mdi-bookmark-minus', 'mdi-bookmark-minus-outline', 'mdi-bookmark-music', 'mdi-bookmark-off', 'mdi-bookmark-off-outline',
            'mdi-bookmark-outline', 'mdi-bookmark-plus', 'mdi-bookmark-plus-outline', 'mdi-bookmark-remove', 'mdi-boombox', 'mdi-bootstrap', 'mdi-border-all', 'mdi-border-all-variant', 'mdi-border-bottom', 'mdi-border-bottom-variant',
            'mdi-border-color', 'mdi-border-horizontal', 'mdi-border-inside', 'mdi-border-left', 'mdi-border-left-variant', 'mdi-border-none', 'mdi-border-none-variant', 'mdi-border-outside', 'mdi-border-right', 'mdi-border-right-variant',
            'mdi-border-style', 'mdi-border-top', 'mdi-border-top-variant', 'mdi-border-vertical', 'mdi-bottle-wine', 'mdi-bow-tie', 'mdi-bowl', 'mdi-bowling', 'mdi-box', 'mdi-box-cutter', 'mdi-box-shadow', 'mdi-braille', 'mdi-brain',
            'mdi-bridge', 'mdi-briefcase', 'mdi-briefcase-check', 'mdi-briefcase-download', 'mdi-briefcase-minus', 'mdi-briefcase-outline', 'mdi-briefcase-plus', 'mdi-briefcase-remove', 'mdi-briefcase-search', 'mdi-briefcase-upload',
            'mdi-brightness-1', 'mdi-brightness-2', 'mdi-brightness-3', 'mdi-brightness-4', 'mdi-brightness-5', 'mdi-brightness-6', 'mdi-brightness-7', 'mdi-brightness-auto', 'mdi-broom', 'mdi-brush', 'mdi-buddhism', 'mdi-buffer', 'mdi-bug',
            'mdi-bug-check', 'mdi-bug-check-outline', 'mdi-bug-outline', 'mdi-bulletin-board', 'mdi-bullhorn', 'mdi-bullseye', 'mdi-bullseye-arrow', 'mdi-bus', 'mdi-bus-articulated-end', 'mdi-bus-articulated-front', 'mdi-bus-clock',
            'mdi-bus-double-decker', 'mdi-bus-school', 'mdi-bus-side', 'mdi-cached', 'mdi-cake', 'mdi-cake-layered', 'mdi-cake-variant', 'mdi-calculator', 'mdi-calendar', 'mdi-calendar-alert', 'mdi-calendar-blank', 'mdi-calendar-check',
            'mdi-calendar-clock', 'mdi-calendar-edit', 'mdi-calendar-heart', 'mdi-calendar-multiple', 'mdi-calendar-multiple-check', 'mdi-calendar-multiselect', 'mdi-calendar-plus', 'mdi-calendar-question', 'mdi-calendar-range',
            'mdi-calendar-remove', 'mdi-calendar-search', 'mdi-calendar-star', 'mdi-calendar-text', 'mdi-calendar-today', 'mdi-calendar-week', 'mdi-calendar-week-begin', 'mdi-call-made', 'mdi-call-merge', 'mdi-call-missed', 'mdi-call-received',
            'mdi-call-split', 'mdi-camcorder', 'mdi-camcorder-box', 'mdi-camcorder-box-off', 'mdi-camcorder-off', 'mdi-camera', 'mdi-camera-account', 'mdi-camera-burst', 'mdi-camera-enhance', 'mdi-camera-front', 'mdi-camera-front-variant',
            'mdi-camera-gopro', 'mdi-camera-image', 'mdi-camera-iris', 'mdi-camera-metering-center', 'mdi-camera-metering-matrix', 'mdi-camera-metering-partial', 'mdi-camera-metering-spot', 'mdi-camera-off', 'mdi-camera-party-mode',
            'mdi-camera-rear', 'mdi-camera-rear-variant', 'mdi-camera-switch', 'mdi-camera-timer', 'mdi-cancel', 'mdi-candle', 'mdi-candycane', 'mdi-cannabis', 'mdi-car', 'mdi-car-battery', 'mdi-car-connected', 'mdi-car-convertible',
            'mdi-car-estate', 'mdi-car-hatchback', 'mdi-car-limousine', 'mdi-car-pickup', 'mdi-car-side', 'mdi-car-sports', 'mdi-car-wash', 'mdi-caravan', 'mdi-cards', 'mdi-cards-club', 'mdi-cards-diamond', 'mdi-cards-heart', 'mdi-cards-outline',
            'mdi-cards-playing-outline', 'mdi-cards-spade', 'mdi-cards-variant', 'mdi-carrot', 'mdi-cart', 'mdi-cart-off', 'mdi-cart-outline', 'mdi-cart-plus', 'mdi-case-sensitive-alt', 'mdi-cash', 'mdi-cash-100', 'mdi-cash-multiple',
            'mdi-cash-usd', 'mdi-cassette', 'mdi-cast', 'mdi-cast-connected', 'mdi-cast-off', 'mdi-castle', 'mdi-cat', 'mdi-cctv', 'mdi-ceiling-light', 'mdi-cellphone', 'mdi-cellphone-android', 'mdi-cellphone-arrow-down', 'mdi-cellphone-basic',
            'mdi-cellphone-dock', 'mdi-cellphone-erase', 'mdi-cellphone-iphone', 'mdi-cellphone-key', 'mdi-cellphone-link', 'mdi-cellphone-link-off', 'mdi-cellphone-lock', 'mdi-cellphone-message', 'mdi-cellphone-off', 'mdi-cellphone-screenshot',
            'mdi-cellphone-settings', 'mdi-cellphone-settings-variant', 'mdi-cellphone-sound', 'mdi-cellphone-text', 'mdi-cellphone-wireless', 'mdi-certificate', 'mdi-chair-school', 'mdi-chart-arc', 'mdi-chart-areaspline', 'mdi-chart-bar',
            'mdi-chart-bar-stacked', 'mdi-chart-bubble', 'mdi-chart-donut', 'mdi-chart-donut-variant', 'mdi-chart-gantt', 'mdi-chart-histogram', 'mdi-chart-line', 'mdi-chart-line-stacked', 'mdi-chart-line-variant', 'mdi-chart-multiline',
            'mdi-chart-pie', 'mdi-chart-scatterplot-hexbin', 'mdi-chart-timeline', 'mdi-check', 'mdi-check-all', 'mdi-check-circle', 'mdi-check-circle-outline', 'mdi-check-decagram', 'mdi-check-outline', 'mdi-checkbox-blank',
            'mdi-checkbox-blank-circle', 'mdi-checkbox-blank-circle-outline', 'mdi-checkbox-blank-outline', 'mdi-checkbox-intermediate', 'mdi-checkbox-marked', 'mdi-checkbox-marked-circle', 'mdi-checkbox-marked-circle-outline',
            'mdi-checkbox-marked-outline', 'mdi-checkbox-multiple-blank', 'mdi-checkbox-multiple-blank-circle', 'mdi-checkbox-multiple-blank-circle-outline', 'mdi-checkbox-multiple-blank-outline', 'mdi-checkbox-multiple-marked',
            'mdi-checkbox-multiple-marked-circle', 'mdi-checkbox-multiple-marked-circle-outline', 'mdi-checkbox-multiple-marked-outline', 'mdi-checkerboard', 'mdi-chemical-weapon', 'mdi-chess-bishop', 'mdi-chess-king', 'mdi-chess-knight',
            'mdi-chess-pawn', 'mdi-chess-queen', 'mdi-chess-rook', 'mdi-chevron-double-down', 'mdi-chevron-double-left', 'mdi-chevron-double-right', 'mdi-chevron-double-up', 'mdi-chevron-down', 'mdi-chevron-down-box',
            'mdi-chevron-down-box-outline', 'mdi-chevron-left', 'mdi-chevron-left-box', 'mdi-chevron-left-box-outline', 'mdi-chevron-right', 'mdi-chevron-right-box', 'mdi-chevron-right-box-outline', 'mdi-chevron-up', 'mdi-chevron-up-box',
            'mdi-chevron-up-box-outline', 'mdi-chili-hot', 'mdi-chili-medium', 'mdi-chili-mild', 'mdi-chip', 'mdi-christianity', 'mdi-church', 'mdi-circle', 'mdi-circle-edit-outline', 'mdi-circle-medium', 'mdi-circle-outline', 'mdi-circle-small',
            'mdi-cisco-webex', 'mdi-city', 'mdi-city-variant', 'mdi-city-variant-outline', 'mdi-clipboard', 'mdi-clipboard-account', 'mdi-clipboard-alert', 'mdi-clipboard-arrow-down', 'mdi-clipboard-arrow-left', 'mdi-clipboard-check',
            'mdi-clipboard-check-outline', 'mdi-clipboard-flow', 'mdi-clipboard-outline', 'mdi-clipboard-plus', 'mdi-clipboard-pulse', 'mdi-clipboard-pulse-outline', 'mdi-clipboard-text', 'mdi-clipboard-text-outline', 'mdi-clippy', 'mdi-clock',
            'mdi-clock-alert', 'mdi-clock-alert-outline', 'mdi-clock-end', 'mdi-clock-fast', 'mdi-clock-in', 'mdi-clock-out', 'mdi-clock-outline', 'mdi-clock-start', 'mdi-close', 'mdi-close-box', 'mdi-close-box-outline', 'mdi-close-circle',
            'mdi-close-circle-outline', 'mdi-close-network', 'mdi-close-octagon', 'mdi-close-octagon-outline', 'mdi-close-outline', 'mdi-closed-caption', 'mdi-cloud', 'mdi-cloud-alert', 'mdi-cloud-braces', 'mdi-cloud-check', 'mdi-cloud-circle',
            'mdi-cloud-download', 'mdi-cloud-off-outline', 'mdi-cloud-outline', 'mdi-cloud-print', 'mdi-cloud-print-outline', 'mdi-cloud-question', 'mdi-cloud-search', 'mdi-cloud-search-outline', 'mdi-cloud-sync', 'mdi-cloud-tags',
            'mdi-cloud-upload', 'mdi-clover', 'mdi-code-array', 'mdi-code-braces', 'mdi-code-brackets', 'mdi-code-equal', 'mdi-code-greater-than', 'mdi-code-greater-than-or-equal', 'mdi-code-less-than', 'mdi-code-less-than-or-equal',
            'mdi-code-not-equal', 'mdi-code-not-equal-variant', 'mdi-code-parentheses', 'mdi-code-string', 'mdi-code-tags', 'mdi-code-tags-check', 'mdi-codepen', 'mdi-coffee', 'mdi-coffee-outline', 'mdi-coffee-to-go', 'mdi-cogs', 'mdi-coin',
            'mdi-coins', 'mdi-collage', 'mdi-color-helper', 'mdi-comment', 'mdi-comment-account', 'mdi-comment-account-outline', 'mdi-comment-alert', 'mdi-comment-alert-outline', 'mdi-comment-arrow-left', 'mdi-comment-arrow-left-outline',
            'mdi-comment-arrow-right', 'mdi-comment-arrow-right-outline', 'mdi-comment-check', 'mdi-comment-check-outline', 'mdi-comment-eye', 'mdi-comment-eye-outline', 'mdi-comment-multiple', 'mdi-comment-multiple-outline',
            'mdi-comment-outline', 'mdi-comment-plus', 'mdi-comment-plus-outline', 'mdi-comment-processing', 'mdi-comment-processing-outline', 'mdi-comment-question', 'mdi-comment-question-outline', 'mdi-comment-remove',
            'mdi-comment-remove-outline', 'mdi-comment-search', 'mdi-comment-search-outline', 'mdi-comment-text', 'mdi-comment-text-multiple', 'mdi-comment-text-multiple-outline', 'mdi-comment-text-outline', 'mdi-compare', 'mdi-compass',
            'mdi-compass-outline', 'mdi-console', 'mdi-console-line', 'mdi-console-network', 'mdi-contact-mail', 'mdi-contacts', 'mdi-contain', 'mdi-contain-end', 'mdi-contain-start', 'mdi-content-copy', 'mdi-content-cut',
            'mdi-content-duplicate', 'mdi-content-paste', 'mdi-content-save', 'mdi-content-save-all', 'mdi-content-save-outline', 'mdi-content-save-settings', 'mdi-contrast', 'mdi-contrast-box', 'mdi-contrast-circle', 'mdi-cookie',
            'mdi-copyright', 'mdi-cordova', 'mdi-corn', 'mdi-counter', 'mdi-cow', 'mdi-crane', 'mdi-creation', 'mdi-credit-card', 'mdi-credit-card-multiple', 'mdi-credit-card-off', 'mdi-credit-card-plus', 'mdi-credit-card-scan',
            'mdi-credit-card-settings', 'mdi-crop', 'mdi-crop-free', 'mdi-crop-landscape', 'mdi-crop-portrait', 'mdi-crop-rotate', 'mdi-crop-square', 'mdi-crosshairs', 'mdi-crosshairs-gps', 'mdi-crown', 'mdi-cryengine', 'mdi-cube',
            'mdi-cube-outline', 'mdi-cube-send', 'mdi-cube-unfolded', 'mdi-cup', 'mdi-cup-off', 'mdi-cup-water', 'mdi-cupcake', 'mdi-curling', 'mdi-currency-bdt', 'mdi-currency-btc', 'mdi-currency-chf', 'mdi-currency-cny', 'mdi-currency-eth',
            'mdi-currency-eur', 'mdi-currency-gbp', 'mdi-currency-inr', 'mdi-currency-jpy', 'mdi-currency-krw', 'mdi-currency-kzt', 'mdi-currency-ngn', 'mdi-currency-php', 'mdi-currency-rub', 'mdi-currency-sign', 'mdi-currency-try',
            'mdi-currency-twd', 'mdi-currency-usd', 'mdi-currency-usd-off', 'mdi-current-ac', 'mdi-current-dc', 'mdi-cursor-default', 'mdi-cursor-default-outline', 'mdi-cursor-move', 'mdi-cursor-pointer', 'mdi-cursor-text', 'mdi-database',
            'mdi-database-export', 'mdi-database-import', 'mdi-database-minus', 'mdi-database-plus', 'mdi-database-search', 'mdi-death-star', 'mdi-death-star-variant', 'mdi-debian', 'mdi-debug-step-into', 'mdi-debug-step-out',
            'mdi-debug-step-over', 'mdi-decagram', 'mdi-decagram-outline', 'mdi-decimal-decrease', 'mdi-decimal-increase', 'mdi-delete', 'mdi-delete-circle', 'mdi-delete-empty', 'mdi-delete-forever', 'mdi-delete-outline', 'mdi-delete-restore',
            'mdi-delete-sweep', 'mdi-delete-variant', 'mdi-delta', 'mdi-desk-lamp', 'mdi-deskphone', 'mdi-desktop-classic', 'mdi-desktop-mac', 'mdi-desktop-mac-dashboard', 'mdi-desktop-tower', 'mdi-details', 'mdi-developer-board',
            'mdi-deviantart', 'mdi-dialpad', 'mdi-diamond', 'mdi-dice-1', 'mdi-dice-2', 'mdi-dice-3', 'mdi-dice-4', 'mdi-dice-5', 'mdi-dice-6', 'mdi-dice-d10', 'mdi-dice-d12', 'mdi-dice-d20', 'mdi-dice-d4', 'mdi-dice-d6', 'mdi-dice-d8',
            'mdi-dice-multiple', 'mdi-dictionary', 'mdi-dip-switch', 'mdi-directions', 'mdi-directions-fork', 'mdi-disc', 'mdi-disc-alert', 'mdi-disc-player', 'mdi-discord', 'mdi-disqus', 'mdi-disqus-outline', 'mdi-division', 'mdi-division-box',
            'mdi-dlna', 'mdi-dna', 'mdi-dns', 'mdi-do-not-disturb', 'mdi-do-not-disturb-off', 'mdi-docker', 'mdi-doctor', 'mdi-dog', 'mdi-dog-side', 'mdi-dolby', 'mdi-domain', 'mdi-donkey', 'mdi-door', 'mdi-door-closed', 'mdi-door-open',
            'mdi-doorbell-video', 'mdi-dots-horizontal', 'mdi-dots-horizontal-circle', 'mdi-dots-vertical', 'mdi-dots-vertical-circle', 'mdi-douban', 'mdi-download', 'mdi-download-multiple', 'mdi-download-network', 'mdi-drag',
            'mdi-drag-horizontal', 'mdi-drag-vertical', 'mdi-drawing', 'mdi-drawing-box', 'mdi-dribbble', 'mdi-dribbble-box', 'mdi-drone', 'mdi-dropbox', 'mdi-drupal', 'mdi-duck', 'mdi-dumbbell', 'mdi-ear-hearing', 'mdi-ear-hearing-off',
            'mdi-earth', 'mdi-earth-box', 'mdi-earth-box-off', 'mdi-earth-off', 'mdi-edge', 'mdi-eight-track', 'mdi-eject', 'mdi-elephant', 'mdi-elevation-decline', 'mdi-elevation-rise', 'mdi-elevator', 'mdi-email', 'mdi-email-alert',
            'mdi-email-open', 'mdi-email-open-outline', 'mdi-email-outline', 'mdi-email-plus', 'mdi-email-plus-outline', 'mdi-email-search', 'mdi-email-search-outline', 'mdi-email-secure', 'mdi-email-variant', 'mdi-emby', 'mdi-emoticon',
            'mdi-emoticon-cool', 'mdi-emoticon-dead', 'mdi-emoticon-devil', 'mdi-emoticon-excited', 'mdi-emoticon-happy', 'mdi-emoticon-neutral', 'mdi-emoticon-poop', 'mdi-emoticon-sad', 'mdi-emoticon-tongue', 'mdi-engine', 'mdi-engine-off',
            'mdi-engine-off-outline', 'mdi-engine-outline', 'mdi-equal', 'mdi-equal-box', 'mdi-eraser', 'mdi-eraser-variant', 'mdi-escalator', 'mdi-ethereum', 'mdi-ethernet', 'mdi-ethernet-cable', 'mdi-ethernet-cable-off', 'mdi-etsy',
            'mdi-ev-station', 'mdi-eventbrite', 'mdi-evernote', 'mdi-exclamation', 'mdi-exit-run', 'mdi-exit-to-app', 'mdi-exponent', 'mdi-exponent-box', 'mdi-export', 'mdi-eye', 'mdi-eye-off', 'mdi-eye-off-outline', 'mdi-eye-outline',
            'mdi-eye-plus', 'mdi-eye-plus-outline', 'mdi-eye-settings', 'mdi-eye-settings-outline', 'mdi-eyedropper', 'mdi-eyedropper-variant', 'mdi-face', 'mdi-face-profile', 'mdi-facebook', 'mdi-facebook-box', 'mdi-facebook-messenger',
            'mdi-factory', 'mdi-fan', 'mdi-fan-off', 'mdi-fast-forward', 'mdi-fast-forward-outline', 'mdi-fax', 'mdi-feather', 'mdi-feature-search', 'mdi-feature-search-outline', 'mdi-fedora', 'mdi-ferry', 'mdi-file', 'mdi-file-account',
            'mdi-file-alert', 'mdi-file-alert-outline', 'mdi-file-chart', 'mdi-file-check', 'mdi-file-cloud', 'mdi-file-compare', 'mdi-file-delimited', 'mdi-file-document', 'mdi-file-document-box', 'mdi-file-document-box-outline',
            'mdi-file-document-outline', 'mdi-file-download', 'mdi-file-download-outline', 'mdi-file-excel', 'mdi-file-excel-box', 'mdi-file-export', 'mdi-file-find', 'mdi-file-hidden', 'mdi-file-image', 'mdi-file-import', 'mdi-file-lock',
            'mdi-file-multiple', 'mdi-file-music', 'mdi-file-outline', 'mdi-file-pdf', 'mdi-file-pdf-box', 'mdi-file-percent', 'mdi-file-plus', 'mdi-file-powerpoint', 'mdi-file-powerpoint-box', 'mdi-file-presentation-box', 'mdi-file-question',
            'mdi-file-restore', 'mdi-file-send', 'mdi-file-tree', 'mdi-file-undo', 'mdi-file-upload', 'mdi-file-upload-outline', 'mdi-file-video', 'mdi-file-word', 'mdi-file-word-box', 'mdi-file-xml', 'mdi-film', 'mdi-filmstrip',
            'mdi-filmstrip-off', 'mdi-filter', 'mdi-filter-outline', 'mdi-filter-remove', 'mdi-filter-remove-outline', 'mdi-filter-variant', 'mdi-finance', 'mdi-find-replace', 'mdi-fingerprint', 'mdi-fire', 'mdi-fire-truck', 'mdi-firebase',
            'mdi-firefox', 'mdi-fish', 'mdi-flag', 'mdi-flag-checkered', 'mdi-flag-outline', 'mdi-flag-triangle', 'mdi-flag-variant', 'mdi-flag-variant-outline', 'mdi-flash', 'mdi-flash-auto', 'mdi-flash-circle', 'mdi-flash-off',
            'mdi-flash-outline', 'mdi-flash-red-eye', 'mdi-flashlight', 'mdi-flashlight-off', 'mdi-flask', 'mdi-flask-empty', 'mdi-flask-empty-outline', 'mdi-flask-outline', 'mdi-flattr', 'mdi-flip-to-back', 'mdi-flip-to-front', 'mdi-floor-lamp',
            'mdi-floor-plan', 'mdi-floppy', 'mdi-floppy-variant', 'mdi-flower', 'mdi-flower-outline', 'mdi-flower-tulip', 'mdi-flower-tulip-outline', 'mdi-folder', 'mdi-folder-account', 'mdi-folder-download', 'mdi-folder-edit',
            'mdi-folder-google-drive', 'mdi-folder-image', 'mdi-folder-key', 'mdi-folder-key-network', 'mdi-folder-lock', 'mdi-folder-lock-open', 'mdi-folder-move', 'mdi-folder-multiple', 'mdi-folder-multiple-image',
            'mdi-folder-multiple-outline', 'mdi-folder-network', 'mdi-folder-open', 'mdi-folder-outline', 'mdi-folder-plus', 'mdi-folder-remove', 'mdi-folder-search', 'mdi-folder-search-outline', 'mdi-folder-star', 'mdi-folder-upload',
            'mdi-font-awesome', 'mdi-food', 'mdi-food-apple', 'mdi-food-croissant', 'mdi-food-fork-drink', 'mdi-food-off', 'mdi-food-variant', 'mdi-football', 'mdi-football-australian', 'mdi-football-helmet', 'mdi-forklift',
            'mdi-format-align-bottom', 'mdi-format-align-center', 'mdi-format-align-justify', 'mdi-format-align-left', 'mdi-format-align-middle', 'mdi-format-align-right', 'mdi-format-align-top', 'mdi-format-annotation-plus', 'mdi-format-bold',
            'mdi-format-clear', 'mdi-format-color-fill', 'mdi-format-color-text', 'mdi-format-columns', 'mdi-format-float-center', 'mdi-format-float-left', 'mdi-format-float-none', 'mdi-format-float-right', 'mdi-format-font',
            'mdi-format-font-size-decrease', 'mdi-format-font-size-increase', 'mdi-format-header-1', 'mdi-format-header-2', 'mdi-format-header-3', 'mdi-format-header-4', 'mdi-format-header-5', 'mdi-format-header-6', 'mdi-format-header-decrease',
            'mdi-format-header-equal', 'mdi-format-header-increase', 'mdi-format-header-pound', 'mdi-format-horizontal-align-center', 'mdi-format-horizontal-align-left', 'mdi-format-horizontal-align-right', 'mdi-format-indent-decrease',
            'mdi-format-indent-increase', 'mdi-format-italic', 'mdi-format-line-spacing', 'mdi-format-line-style', 'mdi-format-line-weight', 'mdi-format-list-bulleted', 'mdi-format-list-bulleted-type', 'mdi-format-list-checkbox',
            'mdi-format-list-checks', 'mdi-format-list-numbers', 'mdi-format-page-break', 'mdi-format-paint', 'mdi-format-paragraph', 'mdi-format-pilcrow', 'mdi-format-quote-close', 'mdi-format-quote-open', 'mdi-format-rotate-90',
            'mdi-format-section', 'mdi-format-size', 'mdi-format-strikethrough', 'mdi-format-strikethrough-variant', 'mdi-format-subscript', 'mdi-format-superscript', 'mdi-format-text', 'mdi-format-textdirection-l-to-r',
            'mdi-format-textdirection-r-to-l', 'mdi-format-title', 'mdi-format-underline', 'mdi-format-vertical-align-bottom', 'mdi-format-vertical-align-center', 'mdi-format-vertical-align-top', 'mdi-format-wrap-inline',
            'mdi-format-wrap-square', 'mdi-format-wrap-tight', 'mdi-format-wrap-top-bottom', 'mdi-forum', 'mdi-forum-outline', 'mdi-forward', 'mdi-fountain', 'mdi-foursquare', 'mdi-freebsd', 'mdi-fridge', 'mdi-fridge-filled',
            'mdi-fridge-filled-bottom', 'mdi-fridge-filled-top', 'mdi-fuel', 'mdi-fullscreen', 'mdi-fullscreen-exit', 'mdi-function', 'mdi-function-variant', 'mdi-gamepad', 'mdi-gamepad-variant', 'mdi-garage', 'mdi-garage-alert',
            'mdi-garage-open', 'mdi-gas-cylinder', 'mdi-gas-station', 'mdi-gate', 'mdi-gate-and', 'mdi-gate-nand', 'mdi-gate-nor', 'mdi-gate-not', 'mdi-gate-or', 'mdi-gate-xnor', 'mdi-gate-xor', 'mdi-gauge', 'mdi-gauge-empty', 'mdi-gauge-full',
            'mdi-gauge-low', 'mdi-gavel', 'mdi-gender-female', 'mdi-gender-male', 'mdi-gender-male-female', 'mdi-gender-transgender', 'mdi-gentoo', 'mdi-gesture', 'mdi-gesture-double-tap', 'mdi-gesture-swipe-down', 'mdi-gesture-swipe-left',
            'mdi-gesture-swipe-right', 'mdi-gesture-swipe-up', 'mdi-gesture-tap', 'mdi-gesture-two-double-tap', 'mdi-gesture-two-tap', 'mdi-ghost', 'mdi-ghost-off', 'mdi-gift', 'mdi-git', 'mdi-github-box', 'mdi-github-circle', 'mdi-github-face',
            'mdi-glass-cocktail', 'mdi-glass-flute', 'mdi-glass-mug', 'mdi-glass-stange', 'mdi-glass-tulip', 'mdi-glass-wine', 'mdi-glassdoor', 'mdi-glasses', 'mdi-globe-model', 'mdi-gmail', 'mdi-gnome', 'mdi-golf', 'mdi-gondola', 'mdi-google',
            'mdi-google-allo', 'mdi-google-analytics', 'mdi-google-assistant', 'mdi-google-cardboard', 'mdi-google-chrome', 'mdi-google-circles', 'mdi-google-circles-communities', 'mdi-google-circles-extended', 'mdi-google-circles-group',
            'mdi-google-controller', 'mdi-google-controller-off', 'mdi-google-drive', 'mdi-google-earth', 'mdi-google-fit', 'mdi-google-glass', 'mdi-google-hangouts', 'mdi-google-home', 'mdi-google-keep', 'mdi-google-lens', 'mdi-google-maps',
            'mdi-google-nearby', 'mdi-google-pages', 'mdi-google-photos', 'mdi-google-physical-web', 'mdi-google-play', 'mdi-google-plus', 'mdi-google-plus-box', 'mdi-google-spreadsheet', 'mdi-google-translate', 'mdi-google-wallet', 'mdi-gpu',
            'mdi-gradient', 'mdi-graphql', 'mdi-grease-pencil', 'mdi-greater-than', 'mdi-greater-than-or-equal', 'mdi-grid', 'mdi-grid-large', 'mdi-grid-off', 'mdi-group', 'mdi-guitar-acoustic', 'mdi-guitar-electric', 'mdi-guitar-pick',
            'mdi-guitar-pick-outline', 'mdi-guy-fawkes-mask', 'mdi-hackernews', 'mdi-hamburger', 'mdi-hammer', 'mdi-hand', 'mdi-hand-okay', 'mdi-hand-peace', 'mdi-hand-peace-variant', 'mdi-hand-pointing-down', 'mdi-hand-pointing-left',
            'mdi-hand-pointing-right', 'mdi-hand-pointing-up', 'mdi-hanger', 'mdi-hard-hat', 'mdi-harddisk', 'mdi-headphones', 'mdi-headphones-bluetooth', 'mdi-headphones-box', 'mdi-headphones-off', 'mdi-headphones-settings', 'mdi-headset',
            'mdi-headset-dock', 'mdi-headset-off', 'mdi-heart', 'mdi-heart-box', 'mdi-heart-box-outline', 'mdi-heart-broken', 'mdi-heart-circle', 'mdi-heart-circle-outline', 'mdi-heart-half', 'mdi-heart-half-full', 'mdi-heart-half-outline',
            'mdi-heart-multiple', 'mdi-heart-multiple-outline', 'mdi-heart-off', 'mdi-heart-outline', 'mdi-heart-pulse', 'mdi-help', 'mdi-help-box', 'mdi-help-circle', 'mdi-help-circle-outline', 'mdi-help-network', 'mdi-hexagon',
            'mdi-hexagon-multiple', 'mdi-hexagon-outline', 'mdi-high-definition', 'mdi-high-definition-box', 'mdi-highway', 'mdi-hinduism', 'mdi-history', 'mdi-hockey-puck', 'mdi-hockey-sticks', 'mdi-hololens', 'mdi-home', 'mdi-home-account',
            'mdi-home-alert', 'mdi-home-assistant', 'mdi-home-automation', 'mdi-home-circle', 'mdi-home-currency-usd', 'mdi-home-heart', 'mdi-home-lock', 'mdi-home-lock-open', 'mdi-home-map-marker', 'mdi-home-modern', 'mdi-home-outline',
            'mdi-home-plus', 'mdi-home-variant', 'mdi-hook', 'mdi-hook-off', 'mdi-hops', 'mdi-horseshoe', 'mdi-hospital', 'mdi-hospital-building', 'mdi-hospital-marker', 'mdi-hot-tub', 'mdi-hotel', 'mdi-houzz', 'mdi-houzz-box', 'mdi-hulu',
            'mdi-human', 'mdi-human-child', 'mdi-human-female', 'mdi-human-female-boy', 'mdi-human-female-female', 'mdi-human-female-girl', 'mdi-human-greeting', 'mdi-human-handsdown', 'mdi-human-handsup', 'mdi-human-male', 'mdi-human-male-boy',
            'mdi-human-male-female', 'mdi-human-male-girl', 'mdi-human-male-male', 'mdi-human-pregnant', 'mdi-humble-bundle', 'mdi-ice-cream', 'mdi-image', 'mdi-image-album', 'mdi-image-area', 'mdi-image-area-close', 'mdi-image-broken',
            'mdi-image-broken-variant', 'mdi-image-filter', 'mdi-image-filter-black-white', 'mdi-image-filter-center-focus', 'mdi-image-filter-center-focus-weak', 'mdi-image-filter-drama', 'mdi-image-filter-frames', 'mdi-image-filter-hdr',
            'mdi-image-filter-none', 'mdi-image-filter-tilt-shift', 'mdi-image-filter-vintage', 'mdi-image-move', 'mdi-image-multiple', 'mdi-image-off', 'mdi-image-outline', 'mdi-image-plus', 'mdi-image-search', 'mdi-image-search-outline',
            'mdi-import', 'mdi-inbox', 'mdi-inbox-arrow-down', 'mdi-inbox-arrow-up', 'mdi-inbox-multiple', 'mdi-incognito', 'mdi-infinity', 'mdi-information', 'mdi-information-outline', 'mdi-information-variant', 'mdi-instagram',
            'mdi-instapaper', 'mdi-internet-explorer', 'mdi-invert-colors', 'mdi-ip', 'mdi-ip-network', 'mdi-islam', 'mdi-itunes', 'mdi-jeepney', 'mdi-jira', 'mdi-jquery', 'mdi-jsfiddle', 'mdi-json', 'mdi-judaism', 'mdi-karate', 'mdi-keg',
            'mdi-kettle', 'mdi-key', 'mdi-key-change', 'mdi-key-minus', 'mdi-key-plus', 'mdi-key-remove', 'mdi-key-variant', 'mdi-keyboard', 'mdi-keyboard-backspace', 'mdi-keyboard-caps', 'mdi-keyboard-close', 'mdi-keyboard-off',
            'mdi-keyboard-outline', 'mdi-keyboard-return', 'mdi-keyboard-settings', 'mdi-keyboard-settings-outline', 'mdi-keyboard-tab', 'mdi-keyboard-variant', 'mdi-kickstarter', 'mdi-knife', 'mdi-knife-military', 'mdi-kodi', 'mdi-label',
            'mdi-label-outline', 'mdi-ladybug', 'mdi-lambda', 'mdi-lamp', 'mdi-lan', 'mdi-lan-connect', 'mdi-lan-disconnect', 'mdi-lan-pending', 'mdi-language-c', 'mdi-language-cpp', 'mdi-language-csharp', 'mdi-language-css3', 'mdi-language-go',
            'mdi-language-html5', 'mdi-language-javascript', 'mdi-language-lua', 'mdi-language-php', 'mdi-language-python', 'mdi-language-python-text', 'mdi-language-r', 'mdi-language-swift', 'mdi-language-typescript', 'mdi-laptop',
            'mdi-laptop-chromebook', 'mdi-laptop-mac', 'mdi-laptop-off', 'mdi-laptop-windows', 'mdi-lastfm', 'mdi-lastpass', 'mdi-launch', 'mdi-lava-lamp', 'mdi-layers', 'mdi-layers-off', 'mdi-layers-off-outline', 'mdi-layers-outline',
            'mdi-lead-pencil', 'mdi-leaf', 'mdi-led-off', 'mdi-led-on', 'mdi-led-outline', 'mdi-led-strip', 'mdi-led-variant-off', 'mdi-led-variant-on', 'mdi-led-variant-outline', 'mdi-less-than', 'mdi-less-than-or-equal', 'mdi-library',
            'mdi-library-books', 'mdi-library-music', 'mdi-library-plus', 'mdi-lifebuoy', 'mdi-light-switch', 'mdi-lightbulb', 'mdi-lightbulb-on', 'mdi-lightbulb-on-outline', 'mdi-lightbulb-outline', 'mdi-lighthouse', 'mdi-lighthouse-on',
            'mdi-link', 'mdi-link-off', 'mdi-link-variant', 'mdi-link-variant-off', 'mdi-linkedin', 'mdi-linkedin-box', 'mdi-linux', 'mdi-linux-mint', 'mdi-litecoin', 'mdi-loading', 'mdi-lock', 'mdi-lock-alert', 'mdi-lock-clock', 'mdi-lock-open',
            'mdi-lock-open-outline', 'mdi-lock-outline', 'mdi-lock-pattern', 'mdi-lock-plus', 'mdi-lock-question', 'mdi-lock-reset', 'mdi-lock-smart', 'mdi-locker', 'mdi-locker-multiple', 'mdi-login', 'mdi-login-variant', 'mdi-logout',
            'mdi-logout-variant', 'mdi-looks', 'mdi-loop', 'mdi-loupe', 'mdi-lumx', 'mdi-magnet', 'mdi-magnet-on', 'mdi-magnify', 'mdi-magnify-close', 'mdi-magnify-minus', 'mdi-magnify-minus-cursor', 'mdi-magnify-minus-outline',
            'mdi-magnify-plus', 'mdi-magnify-plus-cursor', 'mdi-magnify-plus-outline', 'mdi-mail-ru', 'mdi-mailbox', 'mdi-map', 'mdi-map-legend', 'mdi-map-marker', 'mdi-map-marker-circle', 'mdi-map-marker-distance', 'mdi-map-marker-minus',
            'mdi-map-marker-multiple', 'mdi-map-marker-off', 'mdi-map-marker-outline', 'mdi-map-marker-plus', 'mdi-map-marker-radius', 'mdi-map-minus', 'mdi-map-outline', 'mdi-map-plus', 'mdi-map-search', 'mdi-map-search-outline', 'mdi-margin',
            'mdi-markdown', 'mdi-marker', 'mdi-marker-check', 'mdi-material-design', 'mdi-material-ui', 'mdi-math-compass', 'mdi-matrix', 'mdi-maxcdn', 'mdi-medal', 'mdi-medical-bag', 'mdi-medium', 'mdi-memory', 'mdi-menu', 'mdi-menu-down',
            'mdi-menu-down-outline', 'mdi-menu-left', 'mdi-menu-left-outline', 'mdi-menu-right', 'mdi-menu-right-outline', 'mdi-menu-swap', 'mdi-menu-swap-outline', 'mdi-menu-up', 'mdi-menu-up-outline', 'mdi-message', 'mdi-message-alert',
            'mdi-message-alert-outline', 'mdi-message-bulleted', 'mdi-message-bulleted-off', 'mdi-message-draw', 'mdi-message-image', 'mdi-message-outline', 'mdi-message-plus', 'mdi-message-processing', 'mdi-message-reply',
            'mdi-message-reply-text', 'mdi-message-settings', 'mdi-message-settings-variant', 'mdi-message-text', 'mdi-message-text-outline', 'mdi-message-video', 'mdi-meteor', 'mdi-metronome', 'mdi-metronome-tick', 'mdi-micro-sd',
            'mdi-microphone', 'mdi-microphone-minus', 'mdi-microphone-off', 'mdi-microphone-outline', 'mdi-microphone-plus', 'mdi-microphone-settings', 'mdi-microphone-variant', 'mdi-microphone-variant-off', 'mdi-microscope', 'mdi-microsoft',
            'mdi-microsoft-dynamics', 'mdi-midi', 'mdi-midi-port', 'mdi-minecraft', 'mdi-mini-sd', 'mdi-minidisc', 'mdi-minus', 'mdi-minus-box', 'mdi-minus-box-outline', 'mdi-minus-circle', 'mdi-minus-circle-outline', 'mdi-minus-network',
            'mdi-mixcloud', 'mdi-mixed-reality', 'mdi-mixer', 'mdi-monitor', 'mdi-monitor-cellphone', 'mdi-monitor-cellphone-star', 'mdi-monitor-dashboard', 'mdi-monitor-multiple', 'mdi-more', 'mdi-motorbike', 'mdi-mouse', 'mdi-mouse-bluetooth',
            'mdi-mouse-off', 'mdi-mouse-variant', 'mdi-mouse-variant-off', 'mdi-move-resize', 'mdi-move-resize-variant', 'mdi-movie', 'mdi-movie-roll', 'mdi-muffin', 'mdi-multiplication', 'mdi-multiplication-box', 'mdi-mushroom',
            'mdi-mushroom-outline', 'mdi-music', 'mdi-music-box', 'mdi-music-box-outline', 'mdi-music-circle', 'mdi-music-note', 'mdi-music-note-bluetooth', 'mdi-music-note-bluetooth-off', 'mdi-music-note-eighth', 'mdi-music-note-half',
            'mdi-music-note-off', 'mdi-music-note-quarter', 'mdi-music-note-sixteenth', 'mdi-music-note-whole', 'mdi-music-off', 'mdi-nas', 'mdi-nativescript', 'mdi-nature', 'mdi-nature-people', 'mdi-navigation', 'mdi-near-me', 'mdi-needle',
            'mdi-netflix', 'mdi-network', 'mdi-network-strength-1', 'mdi-network-strength-1-alert', 'mdi-network-strength-2', 'mdi-network-strength-2-alert', 'mdi-network-strength-3', 'mdi-network-strength-3-alert', 'mdi-network-strength-4',
            'mdi-network-strength-4-alert', 'mdi-network-strength-off', 'mdi-network-strength-off-outline', 'mdi-network-strength-outline', 'mdi-new-box', 'mdi-newspaper', 'mdi-nfc', 'mdi-nfc-tap', 'mdi-nfc-variant', 'mdi-ninja',
            'mdi-nintendo-switch', 'mdi-nodejs', 'mdi-not-equal', 'mdi-not-equal-variant', 'mdi-note', 'mdi-note-multiple', 'mdi-note-multiple-outline', 'mdi-note-outline', 'mdi-note-plus', 'mdi-note-plus-outline', 'mdi-note-text',
            'mdi-notebook', 'mdi-notification-clear-all', 'mdi-npm', 'mdi-npm-variant', 'mdi-npm-variant-outline', 'mdi-nuke', 'mdi-null', 'mdi-numeric', 'mdi-numeric-0-box', 'mdi-numeric-0-box-multiple-outline', 'mdi-numeric-0-box-outline',
            'mdi-numeric-1-box', 'mdi-numeric-1-box-multiple-outline', 'mdi-numeric-1-box-outline', 'mdi-numeric-2-box', 'mdi-numeric-2-box-multiple-outline', 'mdi-numeric-2-box-outline', 'mdi-numeric-3-box', 'mdi-numeric-3-box-multiple-outline',
            'mdi-numeric-3-box-outline', 'mdi-numeric-4-box', 'mdi-numeric-4-box-multiple-outline', 'mdi-numeric-4-box-outline', 'mdi-numeric-5-box', 'mdi-numeric-5-box-multiple-outline', 'mdi-numeric-5-box-outline', 'mdi-numeric-6-box',
            'mdi-numeric-6-box-multiple-outline', 'mdi-numeric-6-box-outline', 'mdi-numeric-7-box', 'mdi-numeric-7-box-multiple-outline', 'mdi-numeric-7-box-outline', 'mdi-numeric-8-box', 'mdi-numeric-8-box-multiple-outline',
            'mdi-numeric-8-box-outline', 'mdi-numeric-9-box', 'mdi-numeric-9-box-multiple-outline', 'mdi-numeric-9-box-outline', 'mdi-numeric-9-plus-box', 'mdi-numeric-9-plus-box-multiple-outline', 'mdi-numeric-9-plus-box-outline', 'mdi-nut',
            'mdi-nutrition', 'mdi-oar', 'mdi-octagon', 'mdi-octagon-outline', 'mdi-octagram', 'mdi-octagram-outline', 'mdi-odnoklassniki', 'mdi-office', 'mdi-office-building', 'mdi-oil', 'mdi-oil-temperature', 'mdi-omega', 'mdi-onedrive',
            'mdi-onenote', 'mdi-onepassword', 'mdi-opacity', 'mdi-open-in-app', 'mdi-open-in-new', 'mdi-openid', 'mdi-opera', 'mdi-orbit', 'mdi-ornament', 'mdi-ornament-variant', 'mdi-owl', 'mdi-package', 'mdi-package-down', 'mdi-package-up',
            'mdi-package-variant', 'mdi-package-variant-closed', 'mdi-page-first', 'mdi-page-last', 'mdi-page-layout-body', 'mdi-page-layout-footer', 'mdi-page-layout-header', 'mdi-page-layout-sidebar-left', 'mdi-page-layout-sidebar-right',
            'mdi-palette', 'mdi-palette-advanced', 'mdi-palette-swatch', 'mdi-panda', 'mdi-pandora', 'mdi-panorama', 'mdi-panorama-fisheye', 'mdi-panorama-horizontal', 'mdi-panorama-vertical', 'mdi-panorama-wide-angle', 'mdi-paper-cut-vertical',
            'mdi-paperclip', 'mdi-parking', 'mdi-passport', 'mdi-patreon', 'mdi-pause', 'mdi-pause-circle', 'mdi-pause-circle-outline', 'mdi-pause-octagon', 'mdi-pause-octagon-outline', 'mdi-paw', 'mdi-paw-off', 'mdi-paypal', 'mdi-peace',
            'mdi-pen', 'mdi-pencil', 'mdi-pencil-box', 'mdi-pencil-box-outline', 'mdi-pencil-circle', 'mdi-pencil-circle-outline', 'mdi-pencil-lock', 'mdi-pencil-off', 'mdi-pentagon', 'mdi-pentagon-outline', 'mdi-percent', 'mdi-periodic-table',
            'mdi-periodic-table-co2', 'mdi-periscope', 'mdi-pharmacy', 'mdi-phone', 'mdi-phone-bluetooth', 'mdi-phone-classic', 'mdi-phone-forward', 'mdi-phone-hangup', 'mdi-phone-in-talk', 'mdi-phone-incoming', 'mdi-phone-locked',
            'mdi-phone-log', 'mdi-phone-minus', 'mdi-phone-missed', 'mdi-phone-outgoing', 'mdi-phone-paused', 'mdi-phone-plus', 'mdi-phone-return', 'mdi-phone-rotate-landscape', 'mdi-phone-rotate-portrait', 'mdi-phone-settings', 'mdi-phone-voip',
            'mdi-pi', 'mdi-pi-box', 'mdi-piano', 'mdi-pickaxe', 'mdi-pier', 'mdi-pier-crane', 'mdi-pig', 'mdi-pill', 'mdi-pillar', 'mdi-pin', 'mdi-pin-off', 'mdi-pin-off-outline', 'mdi-pin-outline', 'mdi-pine-tree', 'mdi-pine-tree-box',
            'mdi-pinterest', 'mdi-pinterest-box', 'mdi-pipe', 'mdi-pipe-disconnected', 'mdi-pipe-leak', 'mdi-pirate', 'mdi-pistol', 'mdi-piston', 'mdi-pizza', 'mdi-plane-shield', 'mdi-play', 'mdi-play-box-outline', 'mdi-play-circle',
            'mdi-play-circle-outline', 'mdi-play-network', 'mdi-play-pause', 'mdi-play-protected-content', 'mdi-play-speed', 'mdi-playlist-check', 'mdi-playlist-edit', 'mdi-playlist-minus', 'mdi-playlist-play', 'mdi-playlist-plus',
            'mdi-playlist-remove', 'mdi-playstation', 'mdi-plex', 'mdi-plus', 'mdi-plus-box', 'mdi-plus-box-outline', 'mdi-plus-circle', 'mdi-plus-circle-multiple-outline', 'mdi-plus-circle-outline', 'mdi-plus-minus', 'mdi-plus-minus-box',
            'mdi-plus-network', 'mdi-plus-one', 'mdi-plus-outline', 'mdi-pocket', 'mdi-podcast', 'mdi-pokeball', 'mdi-pokemon-go', 'mdi-poker-chip', 'mdi-polaroid', 'mdi-poll', 'mdi-poll-box', 'mdi-polymer', 'mdi-pool', 'mdi-popcorn', 'mdi-pot',
            'mdi-pot-mix', 'mdi-pound', 'mdi-pound-box', 'mdi-power', 'mdi-power-cycle', 'mdi-power-off', 'mdi-power-on', 'mdi-power-plug', 'mdi-power-plug-off', 'mdi-power-settings', 'mdi-power-sleep', 'mdi-power-socket', 'mdi-power-socket-au',
            'mdi-power-socket-eu', 'mdi-power-socket-uk', 'mdi-power-socket-us', 'mdi-power-standby', 'mdi-powershell', 'mdi-prescription', 'mdi-presentation', 'mdi-presentation-play', 'mdi-printer', 'mdi-printer-3d', 'mdi-printer-alert',
            'mdi-printer-settings', 'mdi-printer-wireless', 'mdi-priority-high', 'mdi-priority-low', 'mdi-professional-hexagon', 'mdi-progress-check', 'mdi-progress-clock', 'mdi-progress-download', 'mdi-progress-upload', 'mdi-projector',
            'mdi-projector-screen', 'mdi-publish', 'mdi-pulse', 'mdi-puzzle', 'mdi-puzzle-outline', 'mdi-qi', 'mdi-qqchat', 'mdi-qrcode', 'mdi-qrcode-edit', 'mdi-qrcode-scan', 'mdi-quadcopter', 'mdi-quality-high', 'mdi-quality-low',
            'mdi-quality-medium', 'mdi-quicktime', 'mdi-rabbit', 'mdi-radar', 'mdi-radiator', 'mdi-radio', 'mdi-radio-handheld', 'mdi-radio-tower', 'mdi-radioactive', 'mdi-radiobox-blank', 'mdi-radiobox-marked', 'mdi-raspberrypi', 'mdi-ray-end',
            'mdi-ray-end-arrow', 'mdi-ray-start', 'mdi-ray-start-arrow', 'mdi-ray-start-end', 'mdi-ray-vertex', 'mdi-react', 'mdi-read', 'mdi-receipt', 'mdi-record', 'mdi-record-player', 'mdi-record-rec', 'mdi-recycle', 'mdi-reddit', 'mdi-redo',
            'mdi-redo-variant', 'mdi-reflect-horizontal', 'mdi-reflect-vertical', 'mdi-refresh', 'mdi-regex', 'mdi-registered-trademark', 'mdi-relative-scale', 'mdi-reload', 'mdi-reminder', 'mdi-remote', 'mdi-remote-desktop', 'mdi-rename-box',
            'mdi-reorder-horizontal', 'mdi-reorder-vertical', 'mdi-repeat', 'mdi-repeat-off', 'mdi-repeat-once', 'mdi-replay', 'mdi-reply', 'mdi-reply-all', 'mdi-reproduction', 'mdi-resize', 'mdi-resize-bottom-right', 'mdi-responsive',
            'mdi-restart', 'mdi-restore', 'mdi-restore-clock', 'mdi-rewind', 'mdi-rewind-outline', 'mdi-rhombus', 'mdi-rhombus-medium', 'mdi-rhombus-outline', 'mdi-rhombus-split', 'mdi-ribbon', 'mdi-rice', 'mdi-ring', 'mdi-road',
            'mdi-road-variant', 'mdi-robot', 'mdi-robot-vacuum', 'mdi-robot-vacuum-variant', 'mdi-rocket', 'mdi-room-service', 'mdi-rotate-3d', 'mdi-rotate-left', 'mdi-rotate-left-variant', 'mdi-rotate-right', 'mdi-rotate-right-variant',
            'mdi-rounded-corner', 'mdi-router-wireless', 'mdi-router-wireless-settings', 'mdi-routes', 'mdi-rowing', 'mdi-rss', 'mdi-rss-box', 'mdi-ruler', 'mdi-run', 'mdi-run-fast', 'mdi-safe', 'mdi-sale', 'mdi-salesforce', 'mdi-sass',
            'mdi-satellite', 'mdi-satellite-uplink', 'mdi-satellite-variant', 'mdi-sausage', 'mdi-saxophone', 'mdi-scale', 'mdi-scale-balance', 'mdi-scale-bathroom', 'mdi-scanner', 'mdi-scanner-off', 'mdi-school', 'mdi-scissor-cutting',
            'mdi-screen-rotation', 'mdi-screen-rotation-lock', 'mdi-screwdriver', 'mdi-script', 'mdi-sd', 'mdi-seal', 'mdi-search-web', 'mdi-seat-flat', 'mdi-seat-flat-angled', 'mdi-seat-individual-suite', 'mdi-seat-legroom-extra',
            'mdi-seat-legroom-normal', 'mdi-seat-legroom-reduced', 'mdi-seat-recline-extra', 'mdi-seat-recline-normal', 'mdi-security', 'mdi-security-account', 'mdi-security-account-outline', 'mdi-security-close', 'mdi-security-home',
            'mdi-security-lock', 'mdi-security-network', 'mdi-security-off', 'mdi-select', 'mdi-select-all', 'mdi-select-drag', 'mdi-select-inverse', 'mdi-select-off', 'mdi-selection', 'mdi-selection-drag', 'mdi-selection-off', 'mdi-send',
            'mdi-send-secure', 'mdi-serial-port', 'mdi-server', 'mdi-server-minus', 'mdi-server-network', 'mdi-server-network-off', 'mdi-server-off', 'mdi-server-plus', 'mdi-server-remove', 'mdi-server-security', 'mdi-set-all', 'mdi-set-center',
            'mdi-set-center-right', 'mdi-set-left', 'mdi-set-left-center', 'mdi-set-left-right', 'mdi-set-none', 'mdi-set-right', 'mdi-set-top-box', 'mdi-settings', 'mdi-settings-box', 'mdi-settings-helper', 'mdi-settings-outline', 'mdi-shape',
            'mdi-shape-circle-plus', 'mdi-shape-outline', 'mdi-shape-plus', 'mdi-shape-polygon-plus', 'mdi-shape-rectangle-plus', 'mdi-shape-square-plus', 'mdi-share', 'mdi-share-outline', 'mdi-share-variant', 'mdi-shield',
            'mdi-shield-half-full', 'mdi-shield-outline', 'mdi-ship-wheel', 'mdi-shopping', 'mdi-shopping-music', 'mdi-shovel', 'mdi-shovel-off', 'mdi-shower', 'mdi-shower-head', 'mdi-shredder', 'mdi-shuffle', 'mdi-shuffle-disabled',
            'mdi-shuffle-variant', 'mdi-sigma', 'mdi-sigma-lower', 'mdi-sign-caution', 'mdi-sign-direction', 'mdi-sign-text', 'mdi-signal', 'mdi-signal-2g', 'mdi-signal-3g', 'mdi-signal-4g', 'mdi-signal-5g', 'mdi-signal-cellular-1',
            'mdi-signal-cellular-2', 'mdi-signal-cellular-3', 'mdi-signal-cellular-outline', 'mdi-signal-hspa', 'mdi-signal-hspa-plus', 'mdi-signal-off', 'mdi-signal-variant', 'mdi-silverware', 'mdi-silverware-fork', 'mdi-silverware-fork-knife',
            'mdi-silverware-spoon', 'mdi-silverware-variant', 'mdi-sim', 'mdi-sim-alert', 'mdi-sim-off', 'mdi-sitemap', 'mdi-skip-backward', 'mdi-skip-forward', 'mdi-skip-next', 'mdi-skip-next-circle', 'mdi-skip-next-circle-outline',
            'mdi-skip-previous', 'mdi-skip-previous-circle', 'mdi-skip-previous-circle-outline', 'mdi-skull', 'mdi-skype', 'mdi-skype-business', 'mdi-slack', 'mdi-slackware', 'mdi-sleep', 'mdi-sleep-off', 'mdi-smog', 'mdi-smoke-detector',
            'mdi-smoking', 'mdi-smoking-off', 'mdi-snapchat', 'mdi-snowflake', 'mdi-snowman', 'mdi-soccer', 'mdi-soccer-field', 'mdi-sofa', 'mdi-solar-power', 'mdi-solid', 'mdi-sort', 'mdi-sort-alphabetical', 'mdi-sort-ascending',
            'mdi-sort-descending', 'mdi-sort-numeric', 'mdi-sort-variant', 'mdi-soundcloud', 'mdi-source-branch', 'mdi-source-commit', 'mdi-source-commit-end', 'mdi-source-commit-end-local', 'mdi-source-commit-local',
            'mdi-source-commit-next-local', 'mdi-source-commit-start', 'mdi-source-commit-start-next-local', 'mdi-source-fork', 'mdi-source-merge', 'mdi-source-pull', 'mdi-soy-sauce', 'mdi-speaker', 'mdi-speaker-bluetooth', 'mdi-speaker-off',
            'mdi-speaker-wireless', 'mdi-speedometer', 'mdi-spellcheck', 'mdi-spotify', 'mdi-spotlight', 'mdi-spotlight-beam', 'mdi-spray', 'mdi-square', 'mdi-square-edit-outline', 'mdi-square-inc', 'mdi-square-inc-cash', 'mdi-square-medium',
            'mdi-square-medium-outline', 'mdi-square-outline', 'mdi-square-root', 'mdi-square-root-box', 'mdi-square-small', 'mdi-ssh', 'mdi-stack-exchange', 'mdi-stack-overflow', 'mdi-stadium', 'mdi-stairs', 'mdi-standard-definition',
            'mdi-star', 'mdi-star-box', 'mdi-star-box-outline', 'mdi-star-circle', 'mdi-star-circle-outline', 'mdi-star-face', 'mdi-star-half', 'mdi-star-off', 'mdi-star-outline', 'mdi-steam', 'mdi-steam-box', 'mdi-steering', 'mdi-steering-off',
            'mdi-step-backward', 'mdi-step-backward-2', 'mdi-step-forward', 'mdi-step-forward-2', 'mdi-stethoscope', 'mdi-sticker', 'mdi-sticker-emoji', 'mdi-stocking', 'mdi-stop', 'mdi-stop-circle', 'mdi-stop-circle-outline', 'mdi-store',
            'mdi-store-24-hour', 'mdi-stove', 'mdi-subdirectory-arrow-left', 'mdi-subdirectory-arrow-right', 'mdi-subtitles', 'mdi-subtitles-outline', 'mdi-subway', 'mdi-subway-variant', 'mdi-summit', 'mdi-sunglasses', 'mdi-surround-sound',
            'mdi-surround-sound-2-0', 'mdi-surround-sound-3-1', 'mdi-surround-sound-5-1', 'mdi-surround-sound-7-1', 'mdi-svg', 'mdi-swap-horizontal', 'mdi-swap-horizontal-variant', 'mdi-swap-vertical', 'mdi-swap-vertical-variant', 'mdi-swim',
            'mdi-switch', 'mdi-sword', 'mdi-sword-cross', 'mdi-sync', 'mdi-sync-alert', 'mdi-sync-off', 'mdi-tab', 'mdi-tab-plus', 'mdi-tab-unselected', 'mdi-table', 'mdi-table-border', 'mdi-table-column', 'mdi-table-column-plus-after',
            'mdi-table-column-plus-before', 'mdi-table-column-remove', 'mdi-table-column-width', 'mdi-table-edit', 'mdi-table-large', 'mdi-table-merge-cells', 'mdi-table-of-contents', 'mdi-table-plus', 'mdi-table-remove', 'mdi-table-row',
            'mdi-table-row-height', 'mdi-table-row-plus-after', 'mdi-table-row-plus-before', 'mdi-table-row-remove', 'mdi-table-search', 'mdi-table-settings', 'mdi-tablet', 'mdi-tablet-android', 'mdi-tablet-cellphone', 'mdi-tablet-ipad',
            'mdi-taco', 'mdi-tag', 'mdi-tag-faces', 'mdi-tag-heart', 'mdi-tag-minus', 'mdi-tag-multiple', 'mdi-tag-outline', 'mdi-tag-plus', 'mdi-tag-remove', 'mdi-tag-text-outline', 'mdi-target', 'mdi-target-variant', 'mdi-taxi', 'mdi-teach',
            'mdi-teamviewer', 'mdi-telegram', 'mdi-television', 'mdi-television-box', 'mdi-television-classic', 'mdi-television-classic-off', 'mdi-television-guide', 'mdi-television-off', 'mdi-temperature-celsius', 'mdi-temperature-fahrenheit',
            'mdi-temperature-kelvin', 'mdi-tennis', 'mdi-tent', 'mdi-terrain', 'mdi-test-tube', 'mdi-test-tube-empty', 'mdi-test-tube-off', 'mdi-text', 'mdi-text-shadow', 'mdi-text-short', 'mdi-text-subject', 'mdi-text-to-speech',
            'mdi-text-to-speech-off', 'mdi-textbox', 'mdi-textbox-password', 'mdi-texture', 'mdi-theater', 'mdi-theme-light-dark', 'mdi-thermometer', 'mdi-thermometer-lines', 'mdi-thermostat', 'mdi-thermostat-box', 'mdi-thought-bubble',
            'mdi-thought-bubble-outline', 'mdi-thumb-down', 'mdi-thumb-down-outline', 'mdi-thumb-up', 'mdi-thumb-up-outline', 'mdi-thumbs-up-down', 'mdi-ticket', 'mdi-ticket-account', 'mdi-ticket-confirmation', 'mdi-ticket-outline',
            'mdi-ticket-percent', 'mdi-tie', 'mdi-tilde', 'mdi-timelapse', 'mdi-timer', 'mdi-timer-10', 'mdi-timer-3', 'mdi-timer-off', 'mdi-timer-sand', 'mdi-timer-sand-empty', 'mdi-timer-sand-full', 'mdi-timetable', 'mdi-toggle-switch',
            'mdi-toggle-switch-off', 'mdi-toggle-switch-off-outline', 'mdi-toggle-switch-outline', 'mdi-toilet', 'mdi-toolbox', 'mdi-toolbox-outline', 'mdi-tooltip', 'mdi-tooltip-edit', 'mdi-tooltip-image', 'mdi-tooltip-outline',
            'mdi-tooltip-outline-plus', 'mdi-tooltip-text', 'mdi-tooth', 'mdi-tooth-outline', 'mdi-tor', 'mdi-tournament', 'mdi-tower-beach', 'mdi-tower-fire', 'mdi-towing', 'mdi-track-light', 'mdi-trackpad', 'mdi-trackpad-lock', 'mdi-tractor',
            'mdi-trademark', 'mdi-traffic-light', 'mdi-train', 'mdi-train-variant', 'mdi-tram', 'mdi-transcribe', 'mdi-transcribe-close', 'mdi-transfer', 'mdi-transit-transfer', 'mdi-transition', 'mdi-transition-masked', 'mdi-translate',
            'mdi-trash-can', 'mdi-trash-can-outline', 'mdi-treasure-chest', 'mdi-tree', 'mdi-trello', 'mdi-trending-down', 'mdi-trending-neutral', 'mdi-trending-up', 'mdi-triangle', 'mdi-triangle-outline', 'mdi-trophy', 'mdi-trophy-award',
            'mdi-trophy-outline', 'mdi-trophy-variant', 'mdi-trophy-variant-outline', 'mdi-truck', 'mdi-truck-delivery', 'mdi-truck-fast', 'mdi-truck-trailer', 'mdi-tshirt-crew', 'mdi-tshirt-crew-outline', 'mdi-tshirt-v', 'mdi-tshirt-v-outline',
            'mdi-tumble-dryer', 'mdi-tumblr', 'mdi-tumblr-box', 'mdi-tumblr-reblog', 'mdi-tune', 'mdi-tune-vertical', 'mdi-twitch', 'mdi-twitter', 'mdi-twitter-box', 'mdi-twitter-circle', 'mdi-twitter-retweet', 'mdi-two-factor-authentication',
            'mdi-uber', 'mdi-ubuntu', 'mdi-ultra-high-definition', 'mdi-umbraco', 'mdi-umbrella', 'mdi-umbrella-closed', 'mdi-umbrella-outline', 'mdi-undo', 'mdi-undo-variant', 'mdi-unfold-less-horizontal', 'mdi-unfold-less-vertical',
            'mdi-unfold-more-horizontal', 'mdi-unfold-more-vertical', 'mdi-ungroup', 'mdi-unity', 'mdi-unreal', 'mdi-untappd', 'mdi-update', 'mdi-upload', 'mdi-upload-multiple', 'mdi-upload-network', 'mdi-usb', 'mdi-van-passenger',
            'mdi-van-utility', 'mdi-vanish', 'mdi-vector-arrange-above', 'mdi-vector-arrange-below', 'mdi-vector-circle', 'mdi-vector-circle-variant', 'mdi-vector-combine', 'mdi-vector-curve', 'mdi-vector-difference', 'mdi-vector-difference-ab',
            'mdi-vector-difference-ba', 'mdi-vector-ellipse', 'mdi-vector-intersection', 'mdi-vector-line', 'mdi-vector-point', 'mdi-vector-polygon', 'mdi-vector-polyline', 'mdi-vector-radius', 'mdi-vector-rectangle', 'mdi-vector-selection',
            'mdi-vector-square', 'mdi-vector-triangle', 'mdi-vector-union', 'mdi-venmo', 'mdi-verified', 'mdi-vhs', 'mdi-vibrate', 'mdi-video', 'mdi-video-3d', 'mdi-video-4k-box', 'mdi-video-account', 'mdi-video-image', 'mdi-video-input-antenna',
            'mdi-video-input-component', 'mdi-video-input-hdmi', 'mdi-video-input-svideo', 'mdi-video-minus', 'mdi-video-off', 'mdi-video-plus', 'mdi-video-stabilization', 'mdi-video-switch', 'mdi-video-vintage', 'mdi-view-agenda',
            'mdi-view-array', 'mdi-view-carousel', 'mdi-view-column', 'mdi-view-dashboard', 'mdi-view-dashboard-outline', 'mdi-view-dashboard-variant', 'mdi-view-day', 'mdi-view-grid', 'mdi-view-headline', 'mdi-view-list', 'mdi-view-module',
            'mdi-view-parallel', 'mdi-view-quilt', 'mdi-view-sequential', 'mdi-view-stream', 'mdi-view-week', 'mdi-vimeo', 'mdi-violin', 'mdi-virtual-reality', 'mdi-visual-studio', 'mdi-visual-studio-code', 'mdi-vk', 'mdi-vk-box',
            'mdi-vk-circle', 'mdi-vlc', 'mdi-voice', 'mdi-voicemail', 'mdi-volleyball', 'mdi-volume-high', 'mdi-volume-low', 'mdi-volume-medium', 'mdi-volume-minus', 'mdi-volume-mute', 'mdi-volume-off', 'mdi-volume-plus', 'mdi-vote',
            'mdi-vote-outline', 'mdi-vpn', 'mdi-vuejs', 'mdi-walk', 'mdi-wall', 'mdi-wall-sconce', 'mdi-wall-sconce-flat', 'mdi-wall-sconce-variant', 'mdi-wallet', 'mdi-wallet-giftcard', 'mdi-wallet-membership', 'mdi-wallet-travel', 'mdi-wan',
            'mdi-washing-machine', 'mdi-watch', 'mdi-watch-export', 'mdi-watch-export-variant', 'mdi-watch-import', 'mdi-watch-import-variant', 'mdi-watch-variant', 'mdi-watch-vibrate', 'mdi-water', 'mdi-water-off', 'mdi-water-percent',
            'mdi-water-pump', 'mdi-watermark', 'mdi-waves', 'mdi-weather-cloudy', 'mdi-weather-fog', 'mdi-weather-hail', 'mdi-weather-hurricane', 'mdi-weather-lightning', 'mdi-weather-lightning-rainy', 'mdi-weather-night',
            'mdi-weather-partlycloudy', 'mdi-weather-pouring', 'mdi-weather-rainy', 'mdi-weather-snowy', 'mdi-weather-snowy-rainy', 'mdi-weather-sunny', 'mdi-weather-sunset', 'mdi-weather-sunset-down', 'mdi-weather-sunset-up',
            'mdi-weather-windy', 'mdi-weather-windy-variant', 'mdi-web', 'mdi-webcam', 'mdi-webhook', 'mdi-webpack', 'mdi-wechat', 'mdi-weight', 'mdi-weight-kilogram', 'mdi-weight-pound', 'mdi-whatsapp', 'mdi-wheelchair-accessibility',
            'mdi-whistle', 'mdi-white-balance-auto', 'mdi-white-balance-incandescent', 'mdi-white-balance-iridescent', 'mdi-white-balance-sunny', 'mdi-widgets', 'mdi-wifi', 'mdi-wifi-off', 'mdi-wifi-strength-1', 'mdi-wifi-strength-1-alert',
            'mdi-wifi-strength-1-lock', 'mdi-wifi-strength-2', 'mdi-wifi-strength-2-alert', 'mdi-wifi-strength-2-lock', 'mdi-wifi-strength-3', 'mdi-wifi-strength-3-alert', 'mdi-wifi-strength-3-lock', 'mdi-wifi-strength-4',
            'mdi-wifi-strength-4-alert', 'mdi-wifi-strength-4-lock', 'mdi-wifi-strength-alert-outline', 'mdi-wifi-strength-lock-outline', 'mdi-wifi-strength-off', 'mdi-wifi-strength-off-outline', 'mdi-wifi-strength-outline', 'mdi-wii',
            'mdi-wiiu', 'mdi-wikipedia', 'mdi-window-close', 'mdi-window-closed', 'mdi-window-maximize', 'mdi-window-minimize', 'mdi-window-open', 'mdi-window-restore', 'mdi-windows', 'mdi-windows-classic', 'mdi-wordpress', 'mdi-worker',
            'mdi-wrap', 'mdi-wrench', 'mdi-wunderlist', 'mdi-xamarin', 'mdi-xamarin-outline', 'mdi-xaml', 'mdi-xbox', 'mdi-xbox-controller', 'mdi-xbox-controller-battery-alert', 'mdi-xbox-controller-battery-charging',
            'mdi-xbox-controller-battery-empty', 'mdi-xbox-controller-battery-full', 'mdi-xbox-controller-battery-low', 'mdi-xbox-controller-battery-medium', 'mdi-xbox-controller-battery-unknown', 'mdi-xbox-controller-off', 'mdi-xda', 'mdi-xing',
            'mdi-xing-box', 'mdi-xing-circle', 'mdi-xml', 'mdi-xmpp', 'mdi-yammer', 'mdi-yeast', 'mdi-yelp', 'mdi-yin-yang', 'mdi-youtube', 'mdi-youtube-creator-studio', 'mdi-youtube-gaming', 'mdi-youtube-tv', 'mdi-zip-box', 'mdi-zip-disk',
            'mdi-zodiac-aquarius', 'mdi-zodiac-aries', 'mdi-zodiac-cancer', 'mdi-zodiac-capricorn', 'mdi-zodiac-gemini', 'mdi-zodiac-leo', 'mdi-zodiac-libra', 'mdi-zodiac-pisces', 'mdi-zodiac-sagittarius', 'mdi-zodiac-scorpio',
            'mdi-zodiac-taurus', 'mdi-zodiac-virgo'
        ];

        for (var i = 0, l = iconlist.length; i < l; i++) {
            $('#icon-wrapper').append(
                '<div class="i-block" data-clipboard-text="mdi ' + iconlist[i] + '" data-filter="' + iconlist[i] + '"  data-toggle="tooltip" title="' + iconlist[i] + '">' +
                '<i class="mdi ' + iconlist[i] + '"></i>' +
                '</div>');
        }

        $(window).on('load', function() {
            var iclp = new Clipboard('.i-block');
            iclp.on('success', function(e) {
                $(e.trigger).append("<span class='ic-badge badge badge-success'>copied</span>");
                setTimeout(function() {
                    $('.i-block').children('.ic-badge').remove();
                }, 3000);
            });

            iclp.on('error', function(e) {
                $(e.trigger).append("<span class='ic-badge badge badge-danger'>Error</span>");
                setTimeout(function() {
                    $('.i-block').children('.ic-badge').remove();
                }, 3000);
            });
            $("#icon-search").on("keyup", function() {
                var g = $(this).val().toLowerCase();
                $(".i-main .i-block").each(function() {
                    var t = $(this).attr('data-filter');
                    if (t) {
                        var s = t.toLowerCase();
                    }
                    if (s) {
                        var n = s.indexOf(g);
                        if (n !== -1) {
                            $(this).show();
                        } else {
                            $(this).hide();
                        }
                    }
                });
            });
        });
    </script>

</body>
</html>
